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

Question

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

请参阅plunker：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);
}