[JavaScript] 자바스크립트 요소 앞/뒤에 다른 요소 추가하기

137_자바스크립트 요소 앞/뒤에 다른 요소 추가하기

[적용]

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

---

[문법]

메소드	의미	반환
노드1.before(노드2)	노드1 앞에 노드2 추가	없음
노드1.after(노드2)	노드1 뒤에 노드2 추가	없음
부모노드.hasChild(자식노드)	부모 노드에 자식 노드 존재여부 확인	진리값

---

[내용]

before()와 after()는 지정한 요소의 앞/뒤로 노드를 추가한다.

#targetBox 요소의 앞뒤로 #myBox1 요소와 #myBox2 요소를 삽입하는 예씨를 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div id="myBox1">#myBox1 요소</div>
<div id="myBox2">#myBox2 요소</div>

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

JavaScript                                                                                                                                                          main.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.after(myBox2);
}, 4000);

 

---

 

 

 

 

 

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