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

요소 교체하기

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

구문

replaceChild(새노드, 교체대상노드);

설명

replaceChild() 는 부모 노드 내 자식 노드를 새로운 노드로 교체합니다. 두 번째 인수를 첫 번째 인수로 변경하며, 변경된 노드는 DOM 트리에서 제거되고, replaceChild() 의 반환값이 됩니다. 대상 노드가 존재하지 않으면 에러가 발생하므로 주의합니다.

실습

index.html

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

---

script.js

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