[책] 자바스크립트 코드 레시피 278 - 129일차

요소 복사하기

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

구문

노드.cloneNode([진릿값]); 노드 복제

설명

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

실습

index.html

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

---

script.js

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