The ChildNode.replaceWith()
method replaces this ChildNode
in the children list of its parent with a set of Node
or DOMString
objects. DOMString
objects are inserted as equivalent Text
nodes.
Syntax
[Throws, Unscopable] void ChildNode.replaceWith((Node or DOMString)... nodes);
Parameters
Exceptions
HierarchyRequestError
: Node cannot be inserted at the specified point in the hierarchy.
Examples
Using replaceWith()
var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.replaceWith(span);
console.log(parent.outerHTML);
// "<div><span></span></div>"
ChildNode.replaceWith()
is unscopable
The replaceWith()
method is not scoped into the with
statement. See Symbol.unscopables
for more information.
with(node) {
replaceWith("foo");
}
// ReferenceError: replaceWith is not defined
Polyfill
You can polyfill the replaceWith()
method in Internet Explorer 10+ and higher with the following code:
function ReplaceWithPolyfill() {
'use-strict'; // For safari, and IE > 10
var parent = this.parentNode, i = arguments.length, currentNode;
if (!parent) return;
if (!i) // if there are no arguments
parent.removeChild(this);
while (i--) { // i-- decrements i and returns the value of i before the decrement
currentNode = arguments[i];
if (typeof currentNode !== 'object'){
currentNode = this.ownerDocument.createTextNode(currentNode);
} else if (currentNode.parentNode){
currentNode.parentNode.removeChild(currentNode);
}
// the value of "i" below is after the decrement
if (!i) // if currentNode is the first argument (currentNode === arguments[0])
parent.replaceChild(currentNode, this);
else // if currentNode isn't the first
parent.insertBefore(currentNode, this.nextSibling);
}
}
if (!Element.prototype.replaceWith)
Element.prototype.replaceWith = ReplaceWithPolyfill;
if (!CharacterData.prototype.replaceWith)
CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
if (!DocumentType.prototype.replaceWith)
DocumentType.prototype.replaceWith = ReplaceWithPolyfill;
Specification
Specification | Status | Comment |
DOMThe definition of 'ChildNode.replacewith()' in that specification. | Living Standard | Initial definition. |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
replaceWith
|
Chrome
Full support 54 |
Edge
Full support 17 |
Firefox
Full support 49 |
IE
No support No |
Opera
Full support 39 |
Safari
Full support Yes |
WebView Android
Full support 54 |
Chrome Android
Full support 54 |
Firefox Android
Full support 49 |
Opera Android
Full support 41 |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
ChildNode.replaceWith() by Mozilla Contributors is licensed under CC-BY-SA 2.5.