Node.replaceChild()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
Node.replaceChild() 메소드는 특정 부모 노드의 한 자식 노드를 다른 노드로 교체합니다.
Syntax
js
replacedNode = parentNode.replaceChild(newChild, oldChild);
newChild는oldChild를 교체할 새로운 노드입니다. 만약 이미DOM안에 존재한다면 가장 먼저 제거됩니다.oldChild는 이미 존재하는, 교체될 자식 노드입니다.replacedNode는 교체된 노드입니다.oldChild와 동일한 노드입니다.
Example
js
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// 텅빈 요소 노드를 하나 생성합니다.
// ID도, 속성도, 컨텐츠도 없습니다.
var sp1 = document.createElement("span");
// 'newSpan'이란 id 속성을 부여합니다.
sp1.id = "newSpan";
// 새로운 요소를 위한 컨텐츠를 생성합니다.
var sp1_content = document.createTextNode("new replacement span element.");
// 컨텐츠를 생성한 요소에 붙입니다.
sp1.appendChild(sp1_content);
// DOM에 존재하던, 교체되야할 노드를 참조합니다.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// 이미 존재하던 sp2 노드를 새로운 span 요소인 sp1으로 교체합니다.
parentDiv.replaceChild(sp1, sp2);
// 결과:
// <div>
// <span id="newSpan">new replacement span element.</span>
// </div>