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

요소 앞/뒤에 다른 요소 추가하기

• HTML 요소의 삽입 위치를 상세히 지정하고 싶을 때

구문

노드.before(노드2) 노드1 앞에 노드2 추가
노드.after(노드2) 노드1 뒤에 노드2 추가
부모노드.hasChild(자식노드) 부모 노드에 자식 노드 존재 여부 확인

설명

before() 와 after() 는 지정한 요소의 앞/뒤로 노드를 추가합니다. #targetBox 요소의 앞뒤로 #myBox1 요소와 #myBox2 요소를 삽입하는 샘플을 확인합니다.

실습

index.html

<div id="myBox1">myBox1</div>
<div id="myBox2">myBox2</div>
<div class="container">
  <div id="targetBox">targetBox 요소</div>
</div>

---

script.js

const myBox1 = document.querySelector('#myBox1');
const myBox2 = document.querySelector('#myBox2');
const targetBox = document.querySelector('#targetBox');
// 3초 후 #targetBox 요소의 앞에 #myBox1 요소 추가
setTimeout(() => {
  targetBox.before(myBox1); 
}, 3000);
// 4초 후 #targetBox 요소의 앞에 #myBox2 요소 추가
setTimeout(() => {
  targetBox.before(myBox2); 
}, 4000);