Javascript 克隆和循环问题

Question

我有一个 <div>我克隆(复制)并且我在一个循环中设置它被复制到一个特定的限制。

循环不工作，我的循环有什么问题吗？

这是我的 JSFiddle

Answer 1

您必须将 var clone = original.cloneNode(true); 放在 while 循环中。

这是结果:

document.getElementById('button').onclick = duplicate;
var i = 0;
var counter4 = 3;
var original = document.getElementById('duplicate');

function duplicate() {
    while (i < counter4){
        var clone = original.cloneNode(true); // "deep" clone
        console.log(clone)
        clone.id = "duplicate"; // there can only be one element with an ID
        original.parentNode.appendChild(clone);
        i++;
    }	    	
}

#duplicate{
    width: 100px;
    height: 50px;
    margin-bottom: 10px;
    background-color: red;
}

<input type="button" id="button" value="Button">
    <div id="duplicate">
    </div>