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

Question

Итак, я видел три способа добавления элементов 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 - .clone JQuery в()

Я также видел много использования и ссылки на .clone() в JQuery.
Пример:

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

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

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

Answer 1

Если вы используете JQuery 1.4 лучший способ заключается в следующем:

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

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

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

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

Answer 5

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

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

Answer 6

Clone существующего контента ...

var $html = $template.clone();

 $html.find(''); ///after change content...

Из-за содержания клона со свойствами 'DOM'. Тогда вы можете изменить эти теги, свойства, значение, а затем добавить его.