The Node.replaceChild()
method replaces one child node of the specified node with another.
Syntax
replacedNode = parentNode.replaceChild(newChild, oldChild);
newChild
is the new node to replaceoldChild
. If it already exists in the DOM, it is first removed.oldChild
is the existing child to be replaced.replacedNode
is the replaced node. This is the same node asoldChild
.
Example
// <div> // <span id="childSpan">foo bar</span> // </div> // create an empty element node // without an ID, any attributes, or any content var sp1 = document.createElement("span"); // give it an id attribute called 'newSpan' sp1.id = "newSpan"; // create some content for the new element. var sp1_content = document.createTextNode("new replacement span element."); // apply that content to the new element sp1.appendChild(sp1_content); // build a reference to the existing node to be replaced var sp2 = document.getElementById("childSpan"); var parentDiv = sp2.parentNode; // replace existing node sp2 with the new span element sp1 parentDiv.replaceChild(sp1, sp2); // result: // <div> // <span id="newSpan">new replacement span element.</span> // </div>