[JavaScript] 자바스크립트 지정 위치에 요소 추가하기

136_자바스크립트 지정 위치에 요소 추가하기

[적용]

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

---

[문법]

메소드	의미	반환
부모노드.insertBefore(자식녿, 희망위치의노드)	부모 노드 내 노드 추가	요소(Element)

---

[내용]

inserBefore()는 부모 요소 내 지정 요소의 앞에 노드를 삽입한다.

다음 예시를 통해 3초 후 .container 요소의 제일 앞, 4초후 #box2 요소의 바로 앞에 삽입되는 노드를 확인해 보자

 

HTML                                                                                                                                                              index.html

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

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

JavaScript                                                                                                                                                          main.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);

 

 

---

 

 

 

 

 

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