Лучший способ создать ссылку с помощью JQuery?

Ответ 1

Как правильно сказал Стивен Сюй, вставка HTML-строк происходит быстрее, чем манипулирование DOM, поэтому я рекомендую создавать элементы с манипуляциями строк вместо jQuery.

Вам нужно только изменить это:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah<a>";

:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah</a>";

(закрыть тег <a> с </a> в конце строки).

Строковая манипуляция намного быстрее, чем манипуляция DOM (см. это). Более того, разница будет намного больше, если вы попытаетесь вставить фрагмент DOM в середине большого HTML-кода. Использование DOM DocumentFragments может немного улучшить производительность, но использование конкатенации строк является самым быстрым способом.

Все остальные ответы написали свой ответ, не зная о контексте (jqGrid custom formatter), где вы его используете. Я пытаюсь объяснить, почему это важно в вашем случае.

Из-за преимуществ производительности jqGrid создает фрагменты HTML-кода для сетки сначала как массив строк, затем строит одну строку из массива строк по отношению к .join('') и вставляет результат в тело таблицы в конце всего только. (Я полагаю, что вы используете gridview: true параметр jqGrid, который почти всегда рекомендуется). jqGrid custom formatter - это функция обратного вызова, используемая jqGrid во время построения тела сетки (таблицы). Пользовательский форматировщик должен вернуть фрагмент кода HTML в качестве строки в качестве результата. Строка будет конкатенирована с другими строками, которые строят тело сетки (таблицы).

Итак, если вы измените свой текущий код на чистую манипуляцию с строкой на манипуляцию JQuery DOM и преобразуете результаты в строку (которую необходимо вернуть в результате пользовательского форматирования), тогда ваш код будет работать медленно, и вы будете иметь нет других преимуществ *.

Единственным реальным недостатком использования строковых манипуляций является проблема проверки кода, который вы создаете. Например, использование кода без тегов close </a> является потенциальной проблемой, которую вы можете иметь. В большинстве случаев проблема будет решена при вставке фрагмента DOM, но иногда вы можете получить реальные проблемы. Поэтому вы должны просто проверить код, который вы вставили очень тщательно.

Еще одно замечание: если вы хотите следовать ненавязчивый стиль JavaScript, вы можете использовать "#" в качестве значения для атрибута href и связать соответствующее событие click внутри обработчика событий gridComplete или loadComplete. Если у вас возникнут проблемы с реализацией этого, вы можете открыть новый вопрос, и я попытаюсь написать для вас соответствующий пример кода.

Примечание. Я считаю, что лучшим способом реализации будет использование onCellSelect или beforeSelectRow вместо привязки события click к каждому элементу <a> в столбце. Я рекомендую прочитать следующие ответы: этот, другой и еще один старый ответ.

Ответ 2

Я считаю, что лучше всего быть

$('<a>',{
    text: 'This is blah',
    title: 'Blah',
    href: '#',
    click: function(){ BlahFunc( options.rowId );return false;}
}).appendTo('body');

Живой пример на http://www.jsfiddle.net/gaby/RhWgf/

Я заменил встроенный javascript прикрепленным обработчиком

Цитата из документов о jQuery()

jQuery (html, реквизит)

html Строка, определяющая один, автономный элемент HTML (например, <div/>или <div></div>).
реквизит. Карта атрибутов, событий и методы вызова вновь созданного элемент.

Обновление

Если вам нужен фактический текст ссылки, вы должны обернуть его в div и вернуть .html() этого.

(альтернативно: вы можете использовать доступ к свойству .outerHTML для исходного элемента)

Полный пример в http://www.jsfiddle.net/gaby/RhWgf/1/ (удалил обработчик кликов, так как он потерялся бы в строковой версии, и заменил его обработчиком live, который нацелен на определенный тип ссылок)

Ответ 3

jQuery('<a>').attr('href', 'url').text('blah')

Создает объект jquery, и вы можете просто добавить его в dom с помощью .append.

Ответ 4

Мой предпочтительный способ:

$("<a>", {
  title: "Blah",
  href: "javascript:BlahFunc('" + options.rowId + "')"
  }).append( "This is blah" );

Там хорошая информация в этой статье:
http://marcgrabanski.com/articles/building-html-in-jquery-and-javascript

Ответ 5

В общем, вставка HTML-строки происходит быстрее и многократные DOM-инъекции и DOM-манипуляции, что и делает это манипулирование JQuery DOM. Если вы хотите вставить 500 из них, лучшим вариантом, по эффективности, будет подготовка строки HTML, а затем добавление HTML.

Но для ваших простых целей ваш текущий вариант подойдет вам просто отлично. Для более умного, вы можете использовать библиотеку jQuery DOM для ваших новых элементов. Нижеприведенный пример должен быть самоочевидным, но если я не был ясен в конкретных случаях, оставьте комментарий, и я помогу вам.

var toBeAdded = [
  { title: "one", row: 1, content: "ONE" },
  { title: "two", row: 2, content: "TWO" },
  { title: "three", row: 3, content: "THREE" }
];

var s = toBeAdded.length;
for(i=0;i<s;i++) {
  var a = $('<a>');
  a.attr('title', toBeAdded[i].title);
  a.attr('rel', toBeAdded[i].row);
  a.text(toBeAdded[i].content);
  a.addClass('blah_class');
  a.appendTo($('body'));
}

И затем в универсальном script:

$('a.blah_class').live('click', function(){
  var rel = $(this).attr('rel');
  BlahFunc(rel);
});