[JS] Node.cloneNode : DOM 엘리먼트 복제

[devSoyoung]

Node.cloneNode

노드를 복제해서 반환해주는데, 반환된 노드는 마크업 구조는 복제되지만 이벤트 리스너는 없고 DOM 엘리먼트도 아님

let dupNode = node.cloneNode(deep);

• node : 복제할 노드
• deep : 자식까지 복제하려면 true, 해당 노드만 복제하려면 false(default)
  • <img>, <input> 태그와 같이 하위 태그가 없는 경우에는 값에 관계없이 결과 동일

주의사항

• ID 값의 중복이 발생할 수 있음
• addEventListener()로 추가된 이벤트 리스너는 복제하지 않음
• 인라인 이벤트 핸들러는 복제됨

[devSoyoung]

cloneNode() 메소드에서 반환 된 복제된 노드는 Node.appendChild()나 비슷한 기능을 하는 다른 메소드를 이용해 document의 다른 노드에 추가되기 전까지 document의 일부(DOM 노드)가 아니다. document에 추가되기 전까지는 parent도 가지지 않는다.

The duplicate node returned by cloneNode() is not part of the document until it is added to another node that is part of the document using Node.appendChild() or a similar method. It also has no parent until it is appended to another node.