[자바스크립트] cloneNode() / 노드복사

요소를 DOM에 복제해 붙여넣기 하는 경우, 동일한 기능을 수행하기 때문에 코드를 쉽고 간결하게 만듦 

함수는 생산성을 높여주는 함수로 매우 간단하게 코드 구현이 가능함 

 

노드를 복사할 때 cloneNode(true/false)를 사용해 

자식 노드를 함께 복사할것인지(true) vs 해당 요소만 복제할 것인지 결정가능함 (false) 

var test = Element.cloneNode(true);

 

예제 

const testDiv = document.getElementById('test');
// 복사할 요소를 가져옴 
// test라는 id를 가진 div 요소를 가져옴 

const newNode = testDiv.cloneNode(true);
const newNode = testDiv.cloneNode(false);
// cloneNod를 이용해 newNode변수에 test 노드를 복사함
// 파라미터 값을 true /false로 주어서 각각 구분 

newNode.id = 'copyNode' + idNum 
// cloneNode 를 사용해 노드를 복사하면 노드의 id를 포함한 인라인 속성들이 모두 복사 
// id도 그래도 복사되기 때문에, 중복 id가 발생할 경우 
// 미리 요소의 아이디를 변경

testDiv.after(newNode);
// 복사된 요소를 testDiv의 아래에 붙여넣기

 

 

참고자료 예제  https://hianna.tistory.com/716