[JavaScript] 자바스크립트에서 요소 교체하기

143_자바스크립트에서 요소 교체하기

[적용]

• 부모 요소에서 자식 요소를 교체하고 싶을 때

---

[문법]

메소드	의미	반환
부모노드.replaceChild(새노드, 교체대상노드)	부모 노드의 자식 노드를 교체	교체된 노드

---

[내용]

relplaceChild()는 부모 노드 내 자식 노드를 새로운 노드로 교체한다.

두 번째 인수를 첫번째 인수로 변경하며, 변경된 노드는 DOM 트리에서 제거되고 replaceChild()의 반환값이 된다.

대상 노드가 존재하지 않으면 에러가 발생하므로 주의하자.

 

화면 표시 3초 후 새 노드로 교체하는 예시를 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div class="container">
  <div class="old-box box"교체 전 박스</div>
</div>

JavaScript                                                                                                                                                          main.js

setTimeout(() => {
  // 컨테이너
  const container = document.querySelector('.container');
  // 교체 전 박스 요소
  const oldBox = document.querySelector('.old-box');
  // 새로운 박스 요소. div 요소 생성후 '새로운 박스' 텍스트 노드를 추가
  const newBox = document.createElement('div');
  newBox.textContent = '새로운 박스';
  // new-box와 box CSS 클래스 추가
  newBox.classList.add('new-box', 'box');
  // 새로운 박스로 교체
  container.replaceChild(newBox, oldBox);
}, 3000);

 

---

 

 

 

 

 

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