javascript-单击AddMore时一次添加一个div

如何仅在每次单击“添加更多”时追加一次div？ 现在，它复制了div中的所有内容，并将其加倍

函数addInput（divName）{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=document.getElementById（divName）.innerHTML；
document.getElementById（divName）.appendChild（newdiv）；
}
1.

您每次都试图克隆相同的标记，并将新元素添加到相同的标记中。您可能要做的是创建一个模板标记，克隆模板并将克隆添加到新标记中。这样，每次单击“添加更多”时，您将只添加一个选择

试试这把小提琴

函数addInput（divName，模板）{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=document.getElementById（divName）.innerHTML；
document.getElementById（模板）.appendChild（newdiv）；
}
1.

假设您有一个空div

<div id="display></div>

我的github上有一个工作示例，您可以使用cloneNode

<script>
function addInput(divName){
    var refEl = document.getElementById(divName);// refEl can be anything ex: document.body
   var clone = refEl.cloneNode(true);
   refEl.parentNode.insertBefore(clone, refEl.nextSibling);
}
</script>
<div id="add_more_cat">
    <select name="category">
        <option selected="selected" value="1">1</option>
    </select>                                           
</div>
<a href="#" onClick="addInput('add_more_cat');">+ Add more</a>

函数addInput（divName）{
var refEl=document.getElementById（divName）；//refEl可以是任何内容，例如：document.body
var clone=refEl.cloneNode（真）；
refEl.parentNode.insertBefore（克隆，refEl.nextSibling）；
}
1.

---

请在此处尝试：

您可以通过查看Jquery来简化操作，从而简化语法，并在div的基本副本上使用Jquery克隆操作，这样您就可以在每次操作完成时将其添加到显示div中。。但是因为你没有在Jquery中指定它，所以没有发布任何答案。调用一次

addInput

后的预期结果是什么？@alexmac你能在答案中告诉我这样做的Jquery代码吗？你期望什么，它完全按照你告诉它的那样做。如果您在更改HTML之前需要它，请将其存储在更高范围的变量中。这很有效！我想知道alexmac所说的jquery的较短版本，还有一些错误，我不知道我的其他部分去了哪里，所以更正了这将起作用是的，但我想我应该提到的是，稍后我将不得不以某种方式记录从下拉列表中选择的内容，如果它都是克隆的，我不知道这将如何起作用是的，这只是一个示例，不是答案，但您要求在jQuery中提供一个示例，您可以在不影响原始div的情况下更改克隆div的属性，然后反复使用原始div。我的示例链接与您的问题无关，但在实际环境中展示了它的操作。

<div id="display></div>

<div id="add_more_cat">some html text whatever even extra divs</div>

var cloned = $("#add_more_cat").clone();
cloned.attr('id', someUnique); // this makes sure each area is addressable 

$("#display").append(cloned);
$("#display".show();  // sometimes its best to hide first if doing a loop appends. So if so use the hide before the loop

<script>
function addInput(divName){
    var refEl = document.getElementById(divName);// refEl can be anything ex: document.body
   var clone = refEl.cloneNode(true);
   refEl.parentNode.insertBefore(clone, refEl.nextSibling);
}
</script>
<div id="add_more_cat">
    <select name="category">
        <option selected="selected" value="1">1</option>
    </select>                                           
</div>
<a href="#" onClick="addInput('add_more_cat');">+ Add more</a>