Wie man Inhalt dynamisch von einem Div zu einem anderen onClick mit Javascript hinzufügt

Question

Wie füge ich den Inhalt von iteminitial zu item jedes Mal hinzu, wenn ich auf die Schaltfläche additem klicke? Ich verstehe nicht, warum mein appendChild nicht funktioniert.

See 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

Es funktioniert gut, aber es ist nur die initialitem in item bewegen. Was Sie tun müssen, klonen Sie die initialitem und fügen Sie es dann item hinzu. Gefällt mir: 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); 
}