Question

请温柔，我只是在学习。我试图多次克隆一个div。我可以让它做一次，但不是几次。我想用JQuery（尝试先了解基本的Javascript）来做这件事。以下是一个示例。我做错了什么？

var myDiv = document.getElementById("test");
var divClone = myDiv.cloneNode(true); // the true is for deep cloning
document.body.appendChild(divClone);
document.body.appendChild(divClone);
document.body.appendChild(divClone);

这里是jsfiddle： http://jsfiddle.net/dmperkins74/zvdekh8p/

提前致谢。

Answer 1

每次都需要克隆它。

var myDiv = document.getElementById("test");

document.body.appendChild(myDiv.cloneNode(true));
document.body.appendChild(myDiv.cloneNode(true));
document.body.appendChild(myDiv.cloneNode(true));

fiddle

Answer 2

您需要在每次插入之前克隆它。 I updated your fiddle：

var myDiv = document.getElementById("test");

var divClone = myDiv.cloneNode(true); // the true is for deep cloning

document.body.appendChild(divClone);
divClone = myDiv.cloneNode(true);
document.body.appendChild(divClone);
divClone = myDiv.cloneNode(true);
document.body.appendChild(divClone);

这是因为每个节点只是一个节点，并且只能存在于一个地方。这就是为什么要在再次附加它之前复制它。

您可以将函数包装在一个函数中以便多次使用它（也是fiddle for this）：

function appendNCopies(n, original, appendTo) {
    for(var i = 0; i < n; i++) {
        var clone = original.cloneNode(true);
        appendTo.appendChild(clone);
    }
}

var myDiv = document.getElementById("test");
appendNCopies(3, myDiv, document.body);

Answer 3

你只创建了一次cloneNode，这就是为什么会发生这种情况。使用此代码：

 var myDiv = document.getElementById("test");

var  divClone;
for(var i=0;i<10;i++)
 {
   divClone = myDiv.cloneNode(true); // the true is for deep cloning
   document.body.appendChild(divClone);
 }

Answer 4

jQuery变体非常简单：

var your_div = $('#test').clone()[0].outerHTML;
$('.some_class_where_to_clone').append(your_div);
$('.some_class_where_to_clone').append(your_div);
$('.some_class_where_to_clone').append(your_div);

多次克隆Div

4 个答案: