js - すべての子ノードを複製

Question

すべての子ノードをコンテナに複製し、同じコンテナに挿入したいと考えています。

例えば、私が持っている：

<div id="container"> 
    <div class="square red"></div> 
    <div class="square green"></div> 
</div> 

そして、これはJS実行後：私が持っている必要があり

function duplicateChildNodes (parentId){ 
    var parent = document.getElementById(parentId); 
    NodeList.prototype.forEach = Array.prototype.forEach; 
    var children = parent.childNodes; 
    children.forEach(function(item){ 
    parent.appendChild(item); 
    }); 
}; 

duplicateChildNodes("container"); 

を：何らかの理由で

<div id="container"> 
    <div class="square red"></div> 
    <div class="square green"></div> 
    <div class="square red"></div> 
    <div class="square green"></div> 
</div> 

、それは仕事をdoesen't 。どうすれば解決できますか？
ペン：https://codepen.io/t411tocreate/pen/gXqYWj DOM要素が一つだけの場所に存在する

Answer 1

ので、後にあなたがクローンノードを必要とする

新しい場所に移動されて（あなたのケースで、それは同じ場所に削除され、追加されます）追加最初。例：var cln = itm.cloneNode(true);

チェック以下の更新例：

function duplicateChildNodes (parentId){ 
 
    var parent = document.getElementById(parentId); 
 
    NodeList.prototype.forEach = Array.prototype.forEach; 
 
    var children = parent.childNodes; 
 
    children.forEach(function(item){ 
 
    var cln = item.cloneNode(true); 
 
    parent.appendChild(cln); 
 
    }); 
 
}; 
 

 
duplicateChildNodes("container");

#container{ 
 
    border: 1px solid #ccc; 
 
    padding: 2px; 
 
} 
 
.square{ 
 
    width: 100px; 
 
    height: 100px; 
 
    display: block; 
 
    margin: 2px; 
 
} 
 
.red{ 
 
    background: red; 
 
} 
 

 
.green{ 
 
    background: green; 
 
}

<div id="container"> 
 
    <div class="square red"></div> 
 
    <div class="square green"></div> 
 
</div>