Node.cloneNode 사용법

Syntax

let newClone = node.cloneNode([deep])

Node.cloneNode는 간단히 Node를 복사하여 리턴하는 메소드이다.

자세한 내용은 아래의 MDN 링크를 참고하시기 바랍니다.

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

예제를 통한 실수담 설명

먼저 아래의 html이 있습니다.

<div class="r2-parent">
  <div class="r2-child">child</div>
</div>

<div class="r2-node">
  <div class="r2-child">r2-child</div>
</div>

<div class="r3-node">
  <div class="r3-child">r3-child</div>
</div>

여기서 r2-parent의 node를 r3-node와 r2-node안의 자식으로 복사하려고 했고 아래오 같이 스크립트를 입력 했습니다.

let parentNode = document.querySelector('.r2-parent');
let r2Node = document.querySelector('.r2-node');
let r3Node = document.querySelector('.r3-node');

let parentCloneNode1 = parentNode.cloneNode(true);

r2Node.appendChild(parentCloneNode1)
r3Node.appendChild(parentCloneNode1)

결과는 아래와 같이 r2Node에는 r2-parent의 node가 복사 되지 않았습니다.

child
r2-child
r3-child
child

이유는 복사된 element는 마직막에 삽입 된 엘러먼트에 복사가 된다는 것입니다.

그렇기 때문에 아래와 같이 javascript를 수정해 주었습니다.

let parentNode = document.querySelector('.r2-parent');
let r2Node = document.querySelector('.r2-node');
let r3Node = document.querySelector('.r3-node');

let parentCloneNode1 = parentNode.cloneNode(true);
let parentCloneNode2 = parentNode.cloneNode(true);

r2Node.appendChild(parentCloneNode1)
r3Node.appendChild(parentCloneNode2)

결과는 아래와 같이 잘 나왔습니다.

child
r2-child
child
r3-child
child

cloneNode를 사용할때는 조금 더 주의를 기울여야 할 것 같습니다.^^