cloneNode 메서드

cloneNode 메서드는 요소를 복제하여 정확한 사본을 얻을 수 있게 합니다. 이 사본은 prepend, append, appendChild, insertBefore 또는 insertAdjacentElement 메서드를 사용하여 페이지에 삽입할 수 있습니다.

메서드는 매개변수로 true 또는 false를 받습니다. true가 전달되면 요소는 모든 속성과 자식 요소와 함께 완전히 복제되며, false가 전달되면 요소 자체만 복제됩니다(자식 요소 없이).

구문

javascript요소.cloneNode(true 또는 false);

예제

클래스 elem를 가진 블록의 복사본을 만들어 블록 #parent의 끝에 삽입해 봅시다:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

javascriptlet parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

코드 실행 결과:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

예제

얻은 복제본은 일반 요소처럼 작업할 수 있습니다:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

javascriptlet parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

코드 실행 결과:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>new text1</p>
    <p>new text2</p>
  </div>
</div>

참고 항목