[JavaScript] 자바스크립트에서 노드 교체하기
2022. 7. 8. 17:59ㆍProgram/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
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트에서 요소 내부 HTML 다루기 (0) | 2022.07.08 |
---|---|
[JavaScript] 자바스크립트에서 텍스트 요소 다루기 (0) | 2022.07.08 |
[JavaScript] 자바스크립트에서 요소 교체하기 (0) | 2022.07.08 |
[JavaScript] 자바스크립트에서 요소 복사하기 (0) | 2022.07.08 |
[JavaScript] 자바스크립트에서 요소 생성하기 (0) | 2022.07.07 |