[JavaScript] 자바스크립트 부모 요소에 자식 요소 추가하기

135_자바스크립트 부모 요소에 자식 요소 추가하기

[적용]

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

---

[문법]

메소드	의미	반환
부모노드.appendChild(자식노드)	부모 노드에 자식 노드 추가	요소(Element)

---

[내용]

appendChild()는 부모의 노드 끝에 자식 노드를 추가한다.

페이지를 열어 3초후 .container 요소에 #myBox 요소를 추가하는 예시를 확인해 보자

 

HTML                                                                                                                                                              index.html

<div id="myBox">#myBox 요소</div>

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

JavaScript                                                                                                                                                          main.js

const container = document.querySelector('.container');
const myBox = document.querySelector('#myBox');

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

 

---

 

 

 

 

 

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