DOM Element replace 함수들

DOM Element replace 함수들

Element.replaceWith

oldNode.replaceWith(newNode);
oldNode.replaceWith(newNode1, newNode2, ...);

현재 노드를 인자로 들어온 노드 (또는 노드 여러 개) 로 교체한다

반환값은 없다

 

<div>
    <oldNode></oldNode> { /* 이전 노드 */ }
</div>

<div>
    <newNode1></newNode1> { /* 변경된 노드 1 */ }
    <newNode2></newNode2> { /* 변경된 노드 2 */ }
</div>

해당 위치가 인자로 들어온 노드들로 한번에 대체된다

Node.replaceChild

parentNode.replaceChild(oldChild, newChild);

노드의 자식 노드 oldChild를 newChild으로 교체한다

다음과 같은 상황 등에서 오류 (예외) 가 발생한다

• 만약 oldChild 또는 newChild의 타입이 Document, DocumentFragment, Element가 아닐 경우
• oldChild가 newChild의 조상일 경우

반환값은 교체된 노드 (oldChild) 이다

얘만 Node의 메서드인데, Element는 Node를 상속받은 클래스이므로 Element 타입 요소들도 Node의 메서드를 사용할 수 있다

Element.replaceChildren

parentNode.replaceChildren(newChild);
parentNode.replaceChildren(newChild1, newChild2, ...);

현재 노드의 자식 노드들을 인자로 들어온 노드 (또는 여러 개) 로 한번에 교체한다

반환값은 없다

 

<parentNode>
    <oldChild1></oldChild1> { /* 이전 노드 1 */ }
    <oldChild2></oldChild2> { /* 이전 노드 2 */ }
</parentNode>

<parentNode>
    <newChild1></newChild1> { /* 변경된 노드 1 */ }
    <newChild2></newChild2> { /* 변경된 노드 2 */ }
</parentNode>

자식 영역이 인자로 들어온 노드들로 한번에 대체된다

---

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/Element

https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren

https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild

https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith