-
JavaScript 노드 복제프로그래밍/JavaScript 2022. 10. 10. 11:12728x90
특정 노드를 복제하기 위해서는 cloneNode()를 사용한다. cloneNode()는 기본의 존재하는 노드와 동일한 새로운 노드를 생성하고 반환한다.
cloneNode(true)일 경우 복제되는 노드의 모든 속성과 자식 노드도 같이 복제하게되고 cloneNode(false)일 경우 속성 노드만 복제하고 자식 노드는 복제하기 않는다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>노드 복제</title> </head> <body> <h2>노드 복제</h2> <h3 id="item">복제된 아이템</h3> <div id="list"> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> <p>node.js</p> </div> <button onclick="cloneElement()">노드 복제</button> <script> 'use strict'; function cloneElement(){ const parent = document.getElementById('list'); const originItem = document.getElementById('item'); parent.appendChild(originItem.cloneNode(true)); // <h3 id="item">복제된 아이템</h3>를 복제하여 list의 자식요소에 추가한다. } </script> </body> </html>
기본 상태 
노드 복제 적용 후 결과 728x90'프로그래밍 > JavaScript' 카테고리의 다른 글
JavaScript 이벤트 (0) 2022.10.12 JavaScript 폼객체 (0) 2022.10.11 JavaScript 노드 제거 (0) 2022.10.09 JavaScript 노드 연결 & 노드 생성 (0) 2022.10.08 JavaScript 문서 모델 객체(Document Object Model) (0) 2022.10.07