如何在jQuery中動態創建元素的深層副本？

Question

我想用jQuery動態生成8個新段落：

http://jsfiddle.net/johnhoffman/Dfydn/

但是，此jQuery片段僅向我的div中添加了一個段落（其中帶有文本“ 7”）。

var attached = $("<p>");
var sandbox = $("#sandbox");

for (var i = 0; i < 8; i++) {
    // How come reseting attached works? attached = $("<p>");
    attached.html(i).appendTo(sandbox);
}​

HTML： <div id="sandbox"></div>​

我不想運行attached = $("<p>"); 對於循環的每個迭代，因為我想利用原型設計模式-我想構建一個段落，然后更改其副本，以防止每次都從頭開始構建。 如何制作動態創建的元素的深層副本？

Answer 1

您可以嘗試一下。 使用.clone()方法。 另外，在使用clone（）時，不需要.html（i）。 因為clone返回jQuery對象，所以您甚至不需要在其周圍包裝$（）。

var attached = $("<p>"); 
var sandbox = $("#sandbox");

for (var i = 0; i < 8; i++) {
    attached.clone().appendTo(sandbox); 
}

此外，如果要克隆事件處理程序，則應使用.clone（true）。 參見http://api.jquery.com/clone/了解有關clone()更多信息

Answer 2

jQuery .clone()方法正是用於制作深層副本 。 從文檔中：

描述：創建一組匹配元素的深層副本。

例：

var attached = $("<p>");
var sandbox = $("#sandbox");    

for (var i = 0; i < 8; i++) {
    $(attached).clone().appendTo(sandbox);
}​

Answer 3

var attached = $("<p>");
var sandbox = $("#sandbox");

for (var i = 0; i < 8; i++) {
    // How come reseting attached works? attached = $("<p>");
    attached.clone().html(i).appendTo(sandbox);
}​