Лучший способ добавить элементы 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.
Пример: * 1 023 *

$("#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

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

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

1. Создание элементов DOM как объектов (например, с использованием createElement).
2. Создание элементов DOM в виде HTML (например, используя innerHTML или jQuery's html ()).

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

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

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

Answer 3

Вы можете попробовать это:

 $("<div/>", {

  // PROPERTIES HERE

  text: "Click me",

  id: "example",

  "class": "myDiv",      // ('class' is still better in quotes)

  css: {           
     color: "red",
     fontSize: "3em",
     cursor: "pointer"
  },

  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },

  append: "<i>!!</i>",

  appendTo: "body"      // Finally, append to any selector

}); 

Answer 4

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

var $html = $template.clone();

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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