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

부모 요소에 자식 요소 추가하기

• 동적 표시 요소를 추가하고 싶을 때
• 모달(modal) 윈도우 창을 화면에 추가하고 싶을 때

구문

부모노드.appendChild(자식노드) 부모 노드에 자식 노드 추가

설명

appendChild() 는 부모의 노드 끝에 자식 노드를 추가합니다. 페이지를 열어 3초 후 .container 요소에 #myBox 요소를 추가하는 샘플을 확인합니다.

index.html

<div id="myBox">#myBox 요소</div>
<div class="container">
  <div>자식 요소1</div>
  <div>자식 요소2</div>
</div>

---

script.js

// 3초 후 .container 요소의 끝에 #myBox 요소를 추가
const container = document.querySelector('.container');
const myBox = document.querySelector('#myBox');
setTimeout(() => {
  container.appendChild(myBox);
}, 3000);