Demix ChildNode.replaceWith to Element, CharacterData, DocumentType (#…

…5287)
mdn · May 26, 2021 · 1636870 · 1636870
1 parent 1c41944
commit 1636870
Show file tree

Hide file tree

Showing 9 changed files with 231 additions and 145 deletions.
diff --git 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
@@ -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
@@ -43,6 +43,8 @@ <h2 id="Methods">Methods</h2>
  <dd>Removes the object from its parent children list.</dd>
  <dt>{{domxref("CharacterData.replaceData()")}}</dt>
  <dd>Replaces the specified amount of characters, starting at the specified offset, with the specified {{domxref("DOMString")}}; when this method returns, <code>data</code> contains the modified {{domxref("DOMString")}}.</dd>
+ <dt>{{DOMxRef("CharacterData.replaceWith()")}}</dt>
+ <dd>Replaces the characters in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects.</dd>
  <dt>{{domxref("CharacterData.substringData()")}}</dt>
  <dd>Returns a {{domxref("DOMString")}} containing the part of <code>CharacterData.data</code> of the specified length and starting at the specified offset.</dd>
 </dl>

diff --git a/files/en-us/web/api/characterdata/replacewith/index.html 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
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>CharacterData.replaceWith()</strong></code> 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.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">replaceWith(...nodes)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+  <dt><code>nodes</code></dt>
+  <dd>A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to replace.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+  <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point
+    in the hierarchy.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_replaceWith">Using <code>replaceWith()</code></h3>
+
+<pre class="brush: html">
+&lt;p id="myText"&gt;Some text&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">let text = document.getElementById('myText').firstChild;
+text.replaceWith("Other text");
+</pre>
+
+<pre class="brush: html">
+&lt;p id="myText"&gt;Other text&lt;/p&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>{{Specifications}}
+
+</p>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+  <li>{{domxref("CharacterData.replaceData()")}}</li>
+</ul>
diff --git a/files/en-us/web/api/childnode/replacewith/index.html b/files/en-us/web/api/childnode/replacewith/index.html
diff --git a/files/en-us/web/api/documenttype/index.html b/files/en-us/web/api/documenttype/index.html
@@ -39,6 +39,8 @@ <h2 id="Methods">Methods</h2>
 <dl>
 	<dt>{{domxref("DocumentType.remove()")}}</dt>
 	<dd>Removes the object from its parent children list.</dd>
+  <dt>{{domxref("DocumentType.replaceWith()")}}</dt>
+	<dd>Replaces the document type with a set of given nodes.</dd>
 </dl>
 
 <h2 id="Specifications">Specifications</h2>

diff --git a/files/en-us/web/api/documenttype/replacewith/index.html 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
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>DocumentType.replaceWith()</strong></code> method replaces the document type with a set of given nodes.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">replaceWith(...nodes)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+  <dt><code>nodes</code></dt>
+  <dd>A set of nodes to replace the {{domxref("DocumentType")}} with.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+  <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point
+    in the hierarchy.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_replaceWith">Using <code>replaceWith()</code></h3>
+
+<pre class="brush: js">
+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);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>{{Specifications}}
+
+</p>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+  <li>{{domxref("Element.replaceWith()")}}</li>
+</ul>
diff --git a/files/en-us/web/api/element/index.html b/files/en-us/web/api/element/index.html
@@ -268,6 +268,8 @@ <h2 id="Methods">Methods</h2>
  <dd>Removes an event listener from the element.</dd>
  <dt>{{DOMxRef("Element.replaceChildren()")}}</dt>
  <dd>Replaces the existing children of a {{domxref("Node")}} with a specified new set of children.</dd>
+ <dt>{{DOMxRef("Element.replaceWith()")}}</dt>
+ <dd>Replaces the element in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects.</dd>
  <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
  <dd>Asynchronously asks the browser to make the element full-screen.</dd>
  <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>