Лучший способ добавить элементы DOM с помощью jQuery

Итак, я видел три способа добавления элементов html/DOM на страницу. Мне любопытно, что за плюсы и минусы для каждого из них.

1 - Традиционный JavaScript

Я считаю, что прямой способ JS сделать это - построить каждый элемент, установить атрибуты и затем добавить их. Пример:

var myRow = document.createElement("tr");
myRow.class = "myClass";

var firstTD = document.createElement("td");
firstTD.innerHTML = "first";
myRow.appendChild(firstTD);

var secondTD = document.createElement("td");
secondTD.innerHTML = "second";
myRow.appendChild(secondTD);

document.getElementById("myContainer").appendChild(myRow);

2 - Добавление строки html через jQuery

Я заметил, что большинство примеров jQuery, которые я вижу, обычно просто добавляют строку html.
Пример:

$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>');

3 - jQuery.clone()

Я также видел множество применений и ссылок на .clone() в jQuery.
Пример:

$("#myContainer").append($(".myClass").Clone());

Мне бы хотелось услышать, что другие могут сказать об этом.

(Кроме того, это похоже на хороший кандидат на "вики сообщества", но я не слишком хорошо знаком с ними. Кто-нибудь прокомментирует и сообщит мне, может ли это быть? Спасибо)

Ответы

Ответ 1

Если вы используете jQuery 1.4, лучший способ следующий:

$("<a/>", {
    id: 'example-link',
    href: 'http://www.example.com/',
    text: 'Example Page'
}).appendTo("body");

Ответ 2

Если у вас уже есть элемент шаблона, который вы хотите скопировать, то, во всяком случае, используйте clone().

Но если вы хотите создать элемент с нуля, тогда в основном есть два метода, которые, как я полагаю, вы указали на:

  • Создайте элементы DOM как объекты (например, с помощью createElement).
  • Создайте элементы DOM как HTML (используя innerHTML или jQuery html(), например).

Сначала, если какой-либо из методов более интуитивно понятен или проще для вас писать, я бы рекомендовал просто сделать это.

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

Что касается производительности, это хороший справочник http://andrew.hedges.name/experiments/innerhtml/, но короткий ответ для большинства случаев различия довольно незначительны. Хорошим руководством для производительности в целом является также: http://www.artzstudio.com/2009/04/jquery-performance-rules/. 6-й совет связан с манипуляциями DOM.

Ответ 3

Если у вас уже есть jQuery, используйте его. Если вы не хотите размещать его, используйте версию, размещенную в Google. В конце концов, он всегда вызывает собственный метод javascript createElement или innerHTML. Поэтому я бы использовал # 2 и # 3, если бы мне пришлось клонировать существующий элемент на странице.

Ответ 4

Если вы работаете с большим количеством HTML, которые хотите повторно использовать, я бы предложил вам посмотреть: http://api.jquery.com/jQuery.template/, который окончательный, но будет заменен чем-то лучшим.

Я использую его в производственной среде, и это здорово, так как для небольших фрагментов html то, что sp. сказал, что это лучший способ

Ответ 5

Клонировать существующий контент...

var $html = $template.clone();
 $html.find(''); ///after change content...

Из-за содержимого клона с свойствами "DOM". Затем u может изменить эти теги, свойства, значение, а затем добавить его.

Ответ 6

Более простой способ - использовать jQuery.

$('tr').addClass('myClass') как синтаксис. Это легко читать, понимать и поддерживать.