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
let oldChild = 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 |
---|---|---|
DOMThe 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.
Update compatibility data on GitHub
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
See also
Node.replaceChild() by Mozilla Contributors is licensed under CC-BY-SA 2.5.