HTML DOM Element cloneNode() 메서드

정의와 사용법

cloneNode() 메서드 메서드는 노드의 복사본을 생성하고 해당 복사본을 반환합니다.

cloneNode() 메서드 메서드는 모든 속성 및 값을 클론합니다.

자손(자식)을 클론하고 싶다면, deep 파라미터를 설정하세요 true.

삽입

클론된 노드를 문서에 다시 삽입하려면 사용하세요:

appendChild() 메서드

insertBefore() 메서드

자세히 보기:

adoptNode() 메서드

importNode() 메서드

createElement() 메서드

createTextNode() 메서드

예제

예제 1

"myList2"에서 <li> 요소를 "myList1"로 복사합니다:

const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

클론 전:

  • 커피
  • 차
  • 물
  • 우유

클론 후:

  • 커피
  • 차
  • 우유
  • 물
  • 우유

직접 테스트해 보세요

예제 2

"demo" 요소를 복사하고, 속성 및 자식 요소를 포함하여 문서에 추가합니다:

const node = document.getElementById("demo");
const clone = node.cloneNode(true);
document.body.appendChild(clone);

직접 테스트해 보세요

문법

node.cloneNode(deep)

파라미터

파라미터 설명
deep

선택 사항.

  • false - 기본 설정. 노드 및 속성만 클론
  • true - 클론 노드, 그 속성 및 자손

반환 값

타입 설명
Node 객체 克隆된 노드.

브라우저 지원

element.cloneNode() DOM Level 1 (1998) 기능입니다.

모든 브라우저가 완전히 지원합니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원