使用jQuery添加DOM元素的最佳方法

所以我已经看到了三种添加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 – 通过jQuery添加一个htmlstring

我注意到，我看到的大多数jQuery示例通常只是追加一个htmlstring。
例：

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

3 – jQuery的.clone（）

我也在jQuery中看到了很多用法和对.clone（）的引用。
例：

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

我很想听听别人对此的评论。

（此外，这似乎是一个'社区wiki'的好候选人，但我不太熟悉他们。有人评论，让我知道是否应该是？谢谢）

Answer 1

如果您使用的是jQuery 1.4，最好的方法如下：

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

Answer 2

如果你已经有了一个你想要复制的模板元素，那么通过使用clone（）。

但是如果你想从头开始创build一个元素，那么基本上有两种我认为你提到的方法：

1. 创buildDOM元素作为对象（例如使用createElement）。
2. 将DOM元素创build为HTML（例如，使用innerHTML或jQuery的html（））。

首先，如果其中任何一种方法更直观或更容易为你写，我build议只是这样做。

否则，使用后者的好处是，如果元素有许多孩子，则更为清洁。 例如，试着制作一个有6列的表格行，每行都有一个使用第一种方法的不同的类。 你的代码将比使用第二种方法的时间长得多。

就性能而言，这是一个很好的指导http://andrew.hedges.name/experiments/innerhtml/，但简单的答案是大多数情况下的差异是微不足道的。; 一般来说，一个很好的指导performance是： http : //www.artzstudio.com/2009/04/jquery-performance-rules/ 。 第六个技巧与DOM操作有关。

Answer 3

如果你有jQuery已经可用，使用它。 如果您不想托pipe它，请使用Google的托pipe版本。 最后总是调用本地javascript createElement或innerHTML方法。 所以我会使用＃2和＃3，如果我特别需要克隆页面上的现有元素。

Answer 4

如果你正在处理大量的HTML，那么我build议你看看： http ：

我在生产环境中使用它，这是伟大的，至于为什么sp的小块。 说是最好的办法

Answer 5

克隆现有内容…

  var $ html = $ template.clone（）; 

  $ html.find（ ''）;  ///更改内容后... 

由于克隆内容是与“DOM”属性。 那么你可以改变这个标签，属性，值然后追加它..

Answer 6

更干净的方法是使用jQuery。

$('tr').addClass('myClass')类似于语法。 这很容易阅读，理解和维护。