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 |
---|---|---|
DOM The 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.
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