Node.cloneNode()

 

Node를 복제한다.

Node를 복제하면 내장(인라인) 리스너를 포함하여 모든 속성과 값이 복사된다. 그러나 addEventListener()를 사용하여 추가된 이벤트 리스너나 요소 속성에 할당된 이벤트 리스너(예: node.onclick = someFunction)는 복사하지 않는다. 또한 <canvas> 요소의 경우 페인팅된 이미지가 복사되지 않는다.

 

주의
cloneNode()는 문서에서 중복된 요소 id, name로 이어질 수 있다.
원래 Node에 id 속성이 있고 복제본이 동일한 문서에 배치되는 경우 복제본의 id나 name을 고유하게 수정해야 한다.

 

Parameters
deep Optional
true인 경우 자식 Text 노드에 있을 수 있는 텍스트를 포함하여 노드와 전체 하위 트리도 복사된다.
false인 경우 노드만 복제된다. 노드에 포함된 텍스트 등을 포함한 하위 트리는 복제되지 않는다.
deep은 <img> 및 <input> 요소와 같은 void 요소에 영향을 미치지 않는다.

Return value
복제된 새 Node가 반환된다.
복제된 Node는 부모가 없으며 Node.appendChild() 또는 유사한 메서드를 사용하여 문서에 추가될 때까지 문서의 일부가 아니다.

 

Ex1

const node1 = document.getElementById("list2").lastChild;
const clone = node1.cloneNode(true);
document.getElementById("list1").appendChild(clone);

Ex2

gt = document.querySelector("#gridtemplateid1");
go = document.querySelector(".gridclass1");
for (i = 0; i < 5; i++) {
    gt.appendChild(go.cloneNode(deep = true));
}

참고 예제: Css GridTemplate Ex1