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

노드 교체하기

• 요소를 다른 요소로 교체하고 싶을 때

구문

변경대상노드.replaceWith(새노드)

설명

replaceWith() 는 변경 대상 노드를 새로운 노드로 교체합니다. 교체된 노드가 DOM 트리에서 제거되는 것은 replaceChild() 와 같지만, 반환값이 없다는 점이 다릅니다. 화면 표시 3초 뒤 새로운 노드로 교체하는 샘플을 확인합니다.

실습

index.html

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

---

script.js

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