노드를 복제하는 방법
이번 포스팅은 노드를 복제하기 위해 사용되는 cloneNode() 메서드 사용 방법을 설명합니다.
cloneNode() 메서드
선택한 노드에서 cloneNode() 메서드를 호출하면, 복제된 노드를 반환합니다.
const newNode = originalNode.cloneNode(deep);originalNode는 선택한 노드를 의미하며, cloneNode() 메서드는 불리언 타입의 매개변수를 가집니다.
매개변수의 값이 true인 경우 선택한 노드와 자식 노드가 복제되며, false인 경우 선택한 노드만 복제됩니다. 매개변수를 생략하면 false가 기본 값이 됩니다.
얕은 복제와 깊은 복제
아래는 간단한 HTML 마크업 문서입니다.
<div id="content">
<ul id="ul-list">
<li>JavaScript</li>
<li>Svelte</li>
<li>Angular</li>
</ul>
</div>
얕은 복제
아래는 id가 "content"인 HTML 요소를 cloneNode() 메서드를 사용하여 얕은 복제 후 반환 결과를 콘솔에 출력합니다.
const divNode = document.getElementById("content");
const newNode = divNode.cloneNode(false);
console.log(newNode);[실행 결과]
깊은 복제
아래는 cloneNode() 메서드에 true를 전달하여 id가 "content"인 HTML 요소를 깊은 복제 후 반환 결과를 콘솔에 출력합니다.
const divNode = document.getElementById("content");
const newNode = divNode.cloneNode(true);
console.log(newNode);[실행 결과]
깊은 복사 후 추가하기
아래는 id가 "content"인 HTML 요소를 깊은 복제한 다음 <body> 태그에 추가하는 JavaScript 코드입니다.
const divNode = document.getElementById("content");
const newNode = divNode.cloneNode(true);
document.body.appendChild(newNode);[실행 결과]
정리
- 선택한 노드를 복제하려면 cloneNode() 메서드를 호출합니다.
- 매개변수로 ture를 전달하면 선택한 노드와 모든 자식 노드가 복제되며, false를 전달하면 선택한 노드만 복제됩니다.
반응형
'JavaScript > DOM' 카테고리의 다른 글
| [JavaScript]HTML 애트리뷰트(Attribute) 가져오는 방법 (0) | 2022.12.07 |
|---|---|
| [JavaScript]DOM 프로퍼티와 HTML 애트리뷰트의 차이점 (0) | 2022.12.06 |
| [JavaScript]자식 노드를 제거하는 방법 (0) | 2022.12.05 |
| [JavaScript]자식 노드를 변경하는 방법 (0) | 2022.12.05 |
| [JavaScript]선택한 요소 뒤에 새로운 요소 추가하는 방법 (0) | 2022.12.05 |
댓글