javascript - 单击“添加更多”时一次添加一个 div

Question

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

http://jsfiddle.net/gkf5T/

<script>
function addInput(divName){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = document.getElementById(divName).innerHTML;
      document.getElementById(divName).appendChild(newdiv);
}
</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>

Answer 1

您每次都尝试克隆相同的标签，并且也将新元素添加到相同的标签中。您可能可以做的是创建一个模板标签，克隆该模板并将克隆添加到新标签中。这样，每次您单击“添加更多”时，您最终只会再添加一个选择。

在这里试试这个 fiddle http://jsfiddle.net/gkf5T/1/

<script>
function addInput(divName, template){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = document.getElementById(divName).innerHTML;
      document.getElementById(template).appendChild(newdiv);
}
</script>
<div id="template">
    <select name="category">
        <option selected="selected" value="1">1</option>
    </select>                                           
</div>
<div id="add_more_cat">
</div>
<a href="#" onClick="addInput('template', 'add_more_cat');">+ Add more</a>