Javascript 克隆和循环问题答案

【问题标题】：Javascript Clone and Loop issueJavascript 克隆和循环问题
【发布时间】：2015-10-22 03:50:09
【问题描述】：

我有一个 <div> 我克隆（重复），并且我已经将它设置在 a 循环 中以复制到特定限制。

循环不起作用，我的循环有问题吗？

这是我的JSFiddle

【问题讨论】：

jsfiddle.net/3L05as1n/2
它可以工作，但你检查过它克隆了多少次吗？我已将其设置为克隆 3 次
是的，我现在正在检查。你没有在 while 之后或之前将 i 重置为 0
好的，请问如何设置限制。
@Vinayak 这可能会帮助你Stackoverflow Answer

标签： javascript jquery html css loops

【解决方案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>

【讨论】：

是的，我也试过这个，但我想一个一个地购物，而不是一次。
你的意思是“逐一购物”？如果您每次迭代都没有创建克隆，那么您只有一个克隆项目。这就是克隆只显示一次的原因。