[JavaScript] 자바스크립트에서 노드 교체하기

144_자바스크립트에서 노드 교체하기

[적용]

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

---

[문법]

메소드	의미	반환
변경대상노드.replaceWith(새노드)	대상 노드를 새 노드로 교체	없음

---

[내용]

replaceWith() 는 변경 대상 노드를 새로운 노드로 교체한다.

교체된 노드라 DOM 트리에서 제거되는 것은 replaceChild()와 같지만, 반환값이 없다는 점이 다르다.

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

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

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

 

 

---

 

 

 

 

 

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