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

지정 위치에 요소 추가하기

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

구문

부모노드.insertBefore(자식노드, 희망위치의노드)

설명

insertBefore() 는 부모 요소 내 지정 요소의 앞에 노드를 삽입합니다. 다음 샘플을 통해 3초 후 .container 요소의 제일 앞 4초 후 #box2 요소의 바로 앞에 삽입되는 노드를 확인합니다.

실습

index.html

<div id="myBox1">myBox1 요소</div>
<div id="myBox2">myBox2 요소</div>
<div class="container">
  <div>자식 요소1</div>
  <div id="box2">자식 요소2</div>
</div>

---

script.js

const container = document.querySelector('.container');
const myBox1 = document.querySelector('#myBox1');
const myBox2 = document.querySelector('#myBox2');
const box2 = document.querySelector('#box2');
// 3초 후 .container 제일 앞에 #myBox1 요소 추가
setTimeout(() => {
  container.insertBefore(myBox1, container.firstElementChild);
}, 3000);
// 4초 후 #box2 요소의 앞에 #myBox2 요소 추가
setTimeout(() => {
  container.insertBefore(myBox2, box2);
}, 4000);