diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
index e270ff72c06515f..9145595fdf80591 100644
--- a/files/en-us/_redirects.txt
+++ b/files/en-us/_redirects.txt
@@ -7142,6 +7142,7 @@
/en-US/docs/Web/API/ChildNode.nextElementSibling /en-US/docs/Web/API/Element/nextElementSibling
/en-US/docs/Web/API/ChildNode.remove /en-US/docs/Web/API/Element/remove
/en-US/docs/Web/API/ChildNode/remove /en-US/docs/Web/API/Element/remove
+/en-US/docs/Web/API/ChildNode/replaceWith /en-US/docs/Web/API/Element/replaceWith
/en-US/docs/Web/API/Childnode.previousElementSibling /en-US/docs/Web/API/Element/previousElementSibling
/en-US/docs/Web/API/Client/focus /en-US/docs/Web/API/WindowClient/focus
/en-US/docs/Web/API/Client/focused /en-US/docs/Web/API/WindowClient/focused
diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
index 0595a9d44ef1955..1087e957373a150 100644
--- a/files/en-us/_wikihistory.json
+++ b/files/en-us/_wikihistory.json
@@ -34351,27 +34351,6 @@
"jpmedley"
]
},
- "Web/API/ChildNode/replaceWith": {
- "modified": "2020-10-15T21:47:15.895Z",
- "contributors": [
- "mauricio-sg",
- "stevenvachon",
- "mfluehr",
- "IlyaUpyackovich",
- "Sephr",
- "Peppesterest",
- "zhuangyin",
- "fscholz",
- "subhaze",
- "smukkekim",
- "ght",
- "ericyd",
- "anonyco",
- "stevenwdv",
- "jszhou",
- "jpmedley"
- ]
- },
"Web/API/Client": {
"modified": "2020-10-15T21:31:16.211Z",
"contributors": [
@@ -44281,6 +44260,27 @@
"krosylight"
]
},
+ "Web/API/Element/replaceWith": {
+ "modified": "2020-10-15T21:47:15.895Z",
+ "contributors": [
+ "mauricio-sg",
+ "stevenvachon",
+ "mfluehr",
+ "IlyaUpyackovich",
+ "Sephr",
+ "Peppesterest",
+ "zhuangyin",
+ "fscholz",
+ "subhaze",
+ "smukkekim",
+ "ght",
+ "ericyd",
+ "anonyco",
+ "stevenwdv",
+ "jszhou",
+ "jpmedley"
+ ]
+ },
"Web/API/Element/requestFullScreen": {
"modified": "2020-10-15T21:10:11.404Z",
"contributors": [
diff --git a/files/en-us/web/api/characterdata/index.html b/files/en-us/web/api/characterdata/index.html
index 58720d8fc701eb7..918ec577ea7743d 100644
--- a/files/en-us/web/api/characterdata/index.html
+++ b/files/en-us/web/api/characterdata/index.html
@@ -43,6 +43,8 @@ Methods
Removes the object from its parent children list.
{{domxref("CharacterData.replaceData()")}}
Replaces the specified amount of characters, starting at the specified offset, with the specified {{domxref("DOMString")}}; when this method returns, data contains the modified {{domxref("DOMString")}}.
+ {{DOMxRef("CharacterData.replaceWith()")}}
+ Replaces the characters in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects.
{{domxref("CharacterData.substringData()")}}
Returns a {{domxref("DOMString")}} containing the part of CharacterData.data of the specified length and starting at the specified offset.
diff --git a/files/en-us/web/api/characterdata/replacewith/index.html b/files/en-us/web/api/characterdata/replacewith/index.html
new file mode 100644
index 000000000000000..0f94ce54cb4f47b
--- /dev/null
+++ b/files/en-us/web/api/characterdata/replacewith/index.html
@@ -0,0 +1,65 @@
+---
+title: CharacterData.replaceWith()
+slug: Web/API/CharacterData/replaceWith
+tags:
+ - API
+ - DOM
+ - Method
+ - CharacterData
+ - Reference
+browser-compat: api.CharacterData.replaceWith
+---
+{{APIRef("DOM")}}
+
+The CharacterData.replaceWith() method replaces characters
+ in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects.
+ {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
+Syntax
+
+replaceWith(...nodes)
+
+Parameters
+
+
+ nodes- A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to replace.
+
+
+Exceptions
+
+
+ - {{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point
+ in the hierarchy.
+
+
+Examples
+
+Using replaceWith()
+
+
+<p id="myText">Some text</p>
+
+
+let text = document.getElementById('myText').firstChild;
+text.replaceWith("Other text");
+
+
+
+<p id="myText">Other text</p>
+
+
+Specifications
+
+{{Specifications}}
+
+
+Browser compatibility
+
+{{Compat}}
+
+See also
+
+
+ - {{domxref("CharacterData.replaceData()")}}
+
diff --git a/files/en-us/web/api/childnode/replacewith/index.html b/files/en-us/web/api/childnode/replacewith/index.html
deleted file mode 100644
index d53c39b717ec550..000000000000000
--- a/files/en-us/web/api/childnode/replacewith/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: ChildNode.replaceWith()
-slug: Web/API/ChildNode/replaceWith
-tags:
-- API
-- DOM
-- Method
-- Node
-- Reference
----
-{{APIRef("DOM")}}
-
-The ChildNode.replaceWith() method replaces this
- ChildNode in the children list of its parent with a set of
- {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}}
- objects are inserted as equivalent {{domxref("Text")}} nodes.
-
-Syntax
-
-[Throws, Unscopable]
-void ChildNode.replaceWith((Node or DOMString)... nodes);
-
-
-Parameters
-
-
- nodes- A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to replace.
-
-
-Exceptions
-
-
- - {{domxref("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 {{jsxref("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;
-
-Specifications
-
-
-
-
- | Specification |
- Status |
- Comment |
-
-
- | {{SpecName('DOM WHATWG', '#dom-childnode-replacewith',
- 'ChildNode.replacewith()')}} |
- {{Spec2('DOM WHATWG')}} |
- Initial definition. |
-
-
-
-
-Browser compatibility
-
-{{Compat("api.ChildNode.replaceWith")}}
-
-See also
-
-
- - {{domxref("ChildNode")}} and {{domxref("ParentNode")}}
- - {{domxref("Node.replaceChild()")}}
- - {{domxref("NodeList")}}
-
diff --git a/files/en-us/web/api/documenttype/index.html b/files/en-us/web/api/documenttype/index.html
index b7790478bfaa486..c92fb069d989d2d 100644
--- a/files/en-us/web/api/documenttype/index.html
+++ b/files/en-us/web/api/documenttype/index.html
@@ -39,6 +39,8 @@ Methods
- {{domxref("DocumentType.remove()")}}
- Removes the object from its parent children list.
+ - {{domxref("DocumentType.replaceWith()")}}
+ - Replaces the document type with a set of given nodes.
Specifications
diff --git a/files/en-us/web/api/documenttype/replacewith/index.html b/files/en-us/web/api/documenttype/replacewith/index.html
new file mode 100644
index 000000000000000..8dd6ed2d3e9a0a0
--- /dev/null
+++ b/files/en-us/web/api/documenttype/replacewith/index.html
@@ -0,0 +1,61 @@
+---
+title: DocumentType.replaceWith()
+slug: Web/API/DocumentType/replaceWith
+tags:
+ - API
+ - DOM
+ - Method
+ - DocumentType
+ - Reference
+browser-compat: api.DocumentType.replaceWith
+---
+{{APIRef("DOM")}}
+
+The DocumentType.replaceWith() method replaces the document type with a set of given nodes.
+
+Syntax
+
+replaceWith(...nodes)
+
+Parameters
+
+
+ nodes- A set of nodes to replace the {{domxref("DocumentType")}} with.
+
+
+Exceptions
+
+
+ - {{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point
+ in the hierarchy.
+
+
+Examples
+
+Using replaceWith()
+
+
+let svg_dt = document.implementation.createDocumentType(
+ 'svg:svg',
+ '-//W3C//DTD SVG 1.1//EN',
+ 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'
+);
+
+document.doctype.replaceWith(svg_dt);
+
+
+Specifications
+
+{{Specifications}}
+
+
+Browser compatibility
+
+{{Compat}}
+
+See also
+
+
+ - {{domxref("Element.replaceWith()")}}
+
diff --git a/files/en-us/web/api/element/index.html b/files/en-us/web/api/element/index.html
index ce60f43914f5658..539bf1aa393d29b 100644
--- a/files/en-us/web/api/element/index.html
+++ b/files/en-us/web/api/element/index.html
@@ -268,6 +268,8 @@ Methods
Removes an event listener from the element.
{{DOMxRef("Element.replaceChildren()")}}
Replaces the existing children of a {{domxref("Node")}} with a specified new set of children.
+ {{DOMxRef("Element.replaceWith()")}}
+ Replaces the element in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects.
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
Asynchronously asks the browser to make the element full-screen.
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
diff --git a/files/en-us/web/api/element/replacewith/index.html b/files/en-us/web/api/element/replacewith/index.html
new file mode 100644
index 000000000000000..9cd7fb9f2cca619
--- /dev/null
+++ b/files/en-us/web/api/element/replacewith/index.html
@@ -0,0 +1,77 @@
+---
+title: Element.replaceWith()
+slug: Web/API/Element/replaceWith
+tags:
+ - API
+ - DOM
+ - Method
+ - Element
+ - Reference
+browser-compat: api.Element.replaceWith
+---
+{{APIRef("DOM")}}
+
+The Element.replaceWith() method replaces this
+ Element in the children list of its parent with a set of
+ {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}}
+ objects are inserted as equivalent {{domxref("Text")}} nodes.
+
+Syntax
+
+replaceWith(...nodes)
+
+Parameters
+
+
+ nodes- A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to replace.
+
+
+Exceptions
+
+
+ - {{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point
+ in the hierarchy.
+
+
+Examples
+
+Using replaceWith()
+
+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 {{jsxref("Symbol.unscopables")}} for more information.
+
+with(node) {
+ replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined
+
+Specifications
+
+{{Specifications}}
+
+
+Browser compatibility
+
+{{Compat}}
+
+See also
+
+
+ - {{domxref("Node.replaceChild()")}}
+ - {{domxref("NodeList")}}
+