javascript - 如何使用 Javascript 将内容从一个 div 动态添加到另一个 onClick

Question

每次单击 additem 按钮时，如何将 iteminitial 中的内容添加到 item 中？我不明白为什么我的appendChild 不起作用。

参见骗子:https://plnkr.co/edit/Z223520OyRfv9XyzcNTu

html:

    <div id="iteminitial">      
    <div class="row" style="padding: 0.5em 0 0.5em 0.5em">
          <div class="col-sm-6" >
               <input class="form-control" type="text" name="number[]">
          </div>
          <div class="col-sm-6" >
               <input class="form-control" type="text" name="period[]">                   
          </div>            
    </div>
    </div>


    <div id="item">     

    </div>


    <div class="row" style="padding: 0.5em 0 0.5em 0.5em">                  
          <input class="btn btn-default" type="button" value="Add item" onClick="additem();">
    </div>

js:

function additem(){

      var newitem          = document.getElementById('item');
      var initialitem      = document.getElementById('iteminitial');

      newitem.appendChild(initialitem);
}

Answer 1

它工作得很好，但它只是将 initialitem 移动到 item 中。您需要做的是克隆initialitem，然后将其添加到item。像这样:https://plnkr.co/edit/Z4l8jmdEqsrBzbyyIOHj?p=preview

function additem(){
    var newitem = document.getElementById('item');
    var initialitem_clone = document.getElementById('iteminitial').cloneNode(true);
    console.log(newitem)
    newitem.appendChild(initialitem_clone);
}