[JavaScript] cloneNode로 HTML 요소 복제하기

평소에 JavaScript로 배열에 담긴 JSON 데이터를 HTML로 뿌릴 때 innerHTML에 더하는 방식을 사용했다.

data.forEach(info => {
	htmlList.innerHTML += `<div class='info-area'>
        사용자 번호: ${info.userSeq} <br>
        이름: ${info.userName} <br>
        전화번호: ${info.tel} <br>
        부서명: ${info.deptName} <br>
    </div> `;
})

 

이 방식이 코드상으로는 간단히 작성할 수 있어 편리하지만 반복적으로 innerHTML을 사용하여 리스트를 가져오는 경우, 전체 구조가 다시 렌더링 되면서 성능 저하를 불러올 수 있다는 단점이 있기 때문에 cloneNode 방식을 사용해 보기로 했다.

 

* innerHTML : 기존의 DOM 요소를 삭제하고 새 HTML을 다시 파싱하여 DOM 트리를 구성.

 

 

cloneNode() 

• 엘리먼트, 노드를 복제하여 사용할 수 있게 해준다.
• 복제하고 싶은 요소 뒤에 .cloneNode() 붙여 사용하면 된다.

See the Pen cloneNode 사용법 by eun gu (@eun-gu) on CodePen.

 

cloneNode() 메서드를 사용할 때, true를 인수로 전달하면 template 요소와 그 안에 포함된 모든 자식 노드까지 복사가 된다. 그러나 false를 전달하면 template 요소 자체만 복사돼서 자식 노드는 복사되지 않는다. 그렇기 때문에 자식 노드 (userSeq, name, tel, deptName)까지 모두 복사하려면 cloneNode(true)를 사용해 주면 된다.

 

DOM을 효과적으로 가져오는 방법인 cloneNode를 사용하자.

---

출처 : https://webisfree.com/2015-05-06/[자바스크립트]-clonenode()-함수를-사용해-노드-복제하기

OpenAI ChatGPT (https://openai.com)