The Node.replaceChild()
method replaces a child node within the given (parent) node.
Note the idiosyncratic argument order (new before old). ChildNode.replaceWith()
may be easier to read and use.
Syntax
parentNode.replaceChild(newChild, oldChild);
Parameters
- newChild
- The new node to replace
oldChild
. If it already exists in the DOM, it is first removed. - oldChild
- The child to be replaced.
Return value
The returned value is the replaced node. This is the same node as oldChild
.
Example
// Given: // <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>
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Node: replaceChild' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
replaceChild | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 7 | Safari Full support 1.1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support