javascript - 使用 jQuery 添加 DOM 元素的最佳方式

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 - 通过 jQuery 追加一串 html

我注意到我看到的大多数 jQuery 示例通常只是附加一个 html 字符串。
示例:

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