多次克隆 Div

Question

请温柔点，我才刚学。我正在尝试多次克隆 div。我可以让它做一次，但不能做几次。我想这样做 w/out 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);
 }

多次克隆 Div

Clone a Div Multiple Times

javascript

clone