[JavaScript] 자바스크립트에서 요소 복사하기

142_자바스크립트에서 요소 복사하기

[적용]

• 유저의 클릭에 따라 요소를 추가하고 싶을 때

---

[문법]

메소드	의미	반환
노드.cloneNode([진리값*])	노드 복제	노드(Node)

* 생략 가능

---

[내용]

cloneNode()는 요소를 복제한다.인수에 true를 전달하면 자식 노드도 복제한다.복제한 노드를 화면에 표시할 때는 appendChild()를 사용한다.화면 표시후 3초 뒤 .box 요소를 복제하여 표시하는 예시를 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div class="container">
  <div id="myBox">박스</div>
</div>

JavaScript                                                                                                                                                          main.js

setTimeout(() => {
  // 자식 노드를 포함하여 #myBox 요소 복제
  const cloneBox = document.querySelector('#myBox').cloneNode(true);
  document.querySelector('.container').appendChild(clonedBox);
}, 3000);

 

실행결과

cloneNode()의 인수를 생략하거나 false를 전달하면 자식 노드('박스' 텍스트)는 복제되지 않는다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김