Лучший способ добавить элементы 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 - .clone jQuery ()
Я также видел большое использование и ссылки на .clone () в jQuery.
Пример:
$("#myContainer").append($(".myClass").Clone());
Я хотел бы услышать то, что другие должны сказать об этом.
(Кроме того, это походит на хорошего кандидата на 'общественную Wiki', но я не слишком знаком с ними. Кто-то прокомментирует и сообщит мне, должно ли это быть? Спасибо)
4 ответа
Если вы используете jQuery 1.4, лучший способ:
$("<a/>", {
id: 'example-link',
href: 'http://www.example.com/',
text: 'Example Page'
}).appendTo("body");
Если у вас уже есть элемент шаблона, который вы хотите скопировать, то непременно используйте clone ().
Но если вы хотите создать элемент с нуля, то в основном есть два метода, о которых, я думаю, вы упомянули:
- Создание элементов DOM как объектов (например, с помощью createElement).
- Создавайте элементы DOM как HTML (например, используя innerHTML или jQuery html ()).
Во-первых, если какой-либо из методов более интуитивно понятен или проще для вас написать, я бы рекомендовал просто сделать это.
В противном случае преимущества использования последнего заключаются в том, что он чище, если у элемента много дочерних элементов. Например, попробуйте создать строку таблицы с 6 столбцами, каждый с другим классом, используя первый метод. Ваш код будет намного длиннее, чем если бы вы использовали второй метод.
Что касается производительности, то это хорошее руководство http://andrew.hedges.name/experiments/innerhtml/ , но краткий ответ - в большинстве случаев различия весьма незначительны. Хорошее руководство по производительности в целом: http://www.artzstudio.com/2009/04/jquery-performance-rules/ . Шестой совет связан с манипуляциями с DOM.
Если у вас уже есть jQuery, используйте его. Если вы не хотите размещать его, используйте версию, размещенную на сервере Google. В конце концов, он все равно всегда вызывает собственные методы javascript createElement или innerHTML. Поэтому я бы использовал №2 и №3, если бы мне пришлось специально клонировать существующий элемент на странице.
Более чистый способ - использовать jQuery.
$ ('tr'). AddClass ('myClass') как синтаксис. Это легко читать, понимать и поддерживать.