javascript - 多次克隆一个 Div

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

您需要在每次插入之前克隆它。 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);