使用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());

我很想听听其他人对此的看法.

(此外,这似乎是'社区维基'的一个很好的候选人,但我对它们不太熟悉.有人会发表评论并让我知道它是否应该？谢谢)

Answer 1

如果您使用的是jQuery 1.4,最好的方法如下:

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