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>