Element: replaceWith() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The Element.replaceWith()
method replaces this
Element
in the children list of its parent with a set of
Node
objects or strings. Strings are inserted as equivalent Text
nodes.
Syntax
js
replaceWith(param1)
replaceWith(param1, param2)
replaceWith(param1, param2, /* …, */ paramN)
Parameters
param1
, …,paramN
-
A set of
Node
objects or strings to replace.
Return value
None (undefined
).
Exceptions
HierarchyRequestError
DOMException
-
Thrown when the node cannot be inserted at the specified point in the hierarchy.
Examples
Using replaceWith()
js
const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
const span = document.createElement("span");
p.replaceWith(span);
console.log(div.outerHTML);
// "<div><span></span></div>"
replaceWith()
is unscopable
The replaceWith()
method is not scoped into the with
statement. See Symbol.unscopables
for more information.
js
with (node) {
replaceWith("foo");
}
// ReferenceError: replaceWith is not defined
Specifications
Specification |
---|
DOM # ref-for-dom-childnode-replacewith① |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
replaceWith |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
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.