forked from mdn/content
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Demix Parentnode.{append,prepend} to Element, Document, DocumentFragm…
…ent pages (mdn#4163) * Move ParentNode.append to Element.append and update Element.append * Update Element method list to add append * Add Document.append * Add DocumentFragment.append * Update links to ParentNode.append and ParentNode.prepend * Move ParentNode.prepend to Element.prepend and update Element.prepend * Add Document.prepend * Add DocumentFragment.prepend page
- Loading branch information
Showing
19 changed files
with
625 additions
and
351 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| --- | ||
| title: Document.append() | ||
| slug: Web/API/Document/append | ||
| tags: | ||
| - API | ||
| - DOM | ||
| - Method | ||
| - Node | ||
| - Document | ||
| - Reference | ||
| --- | ||
| <p>{{APIRef("DOM")}}</p> | ||
|
|
||
| <p>The <strong><code>Document.append()</code></strong> method | ||
| inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after | ||
| the last child of the document. </span>{{domxref("DOMString")}} objects | ||
| are inserted as equivalent {{domxref("Text")}} nodes.</p> | ||
|
|
||
| <p>This method appends a child to a <code>Document</code>. To append to an arbitrary element in the tree, see {{domxref("Element.append()")}}.</p> | ||
|
|
||
| <h2 id="Syntax">Syntax</h2> | ||
|
|
||
| <pre class="brush: js"> | ||
| append(...nodesOrDOMStrings) | ||
| </pre> | ||
|
|
||
| <h3 id="Parameters">Parameters</h3> | ||
|
|
||
| <dl> | ||
| <dt><code>nodesOrDOMStrings</code></dt> | ||
| <dd>A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to insert.</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="Appending_a_root_element_to_a_document">Appending a root element to a document</h3> | ||
|
|
||
| <p>If you try to append an element to an existing HTML document, | ||
| it might throw a {{domxref("HierarchyRequestError")}} given a {{HTMLElement("html")}} element already exists.</p> | ||
|
|
||
| <pre class="brush: js"> | ||
| let html = document.createElement("html"); | ||
| document.append(html); | ||
| // HierarchyRequestError: The operation would yield an incorrect node tree. | ||
| </pre> | ||
|
|
||
| <p>If you are creating a new document without any existing element, you can append a root HTML element (or a root SVG element):</p> | ||
|
|
||
| <pre class="brush: js"> | ||
| let doc = new Document(); | ||
| let html = document.createElement("html"); | ||
| doc.append(html); | ||
|
|
||
| doc.children; // HTMLCollection [<html>] | ||
| </pre> | ||
|
|
||
| <h2 id="Specifications">Specifications</h2> | ||
|
|
||
| <table class="standard-table"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Specification</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <p>{{Compat("api.Document.append")}}</p> | ||
|
|
||
| <h2 id="See_also">See also</h2> | ||
|
|
||
| <ul> | ||
| <li>{{domxref("Document.prepend()")}}</li> | ||
| <li>{{domxref("Element.append()")}}</li> | ||
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| --- | ||
| title: Document.prepend() | ||
| slug: Web/API/Document/prepend | ||
| tags: | ||
| - API | ||
| - DOM | ||
| - Method | ||
| - Node | ||
| - Document | ||
| - Reference | ||
| --- | ||
| <p>{{APIRef("DOM")}}</p> | ||
|
|
||
| <p>The <strong><code>Document.prepend()</code></strong> method | ||
| inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before | ||
| the first child of the document. </span>{{domxref("DOMString")}} objects | ||
| are inserted as equivalent {{domxref("Text")}} nodes.</p> | ||
|
|
||
| <p>This method prepends a child to a <code>Document</code>. To prepend to an arbitrary element in the tree, see {{domxref("Element.prepend()")}}.</p> | ||
|
|
||
| <h2 id="Syntax">Syntax</h2> | ||
|
|
||
| <pre class="brush: js"> | ||
| prepend(...nodesOrDOMStrings) | ||
| </pre> | ||
|
|
||
| <h3 id="Parameters">Parameters</h3> | ||
|
|
||
| <dl> | ||
| <dt><code>nodesOrDOMStrings</code></dt> | ||
| <dd>A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to insert.</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="Prepending_a_root_element_to_a_document">Prepending a root element to a document</h3> | ||
|
|
||
| <p>If you try to prepend an element to an existing HTML document, | ||
| it might throw a {{domxref("HierarchyRequestError")}} given a {{HTMLElement("html")}} element already exists.</p> | ||
|
|
||
| <pre class="brush: js"> | ||
| let html = document.createElement("html"); | ||
| document.prepend(html); | ||
| // HierarchyRequestError: The operation would yield an incorrect node tree. | ||
| </pre> | ||
|
|
||
| <p>If you are creating a new document without any existing element, you can prepend a root HTML element (or a root SVG element):</p> | ||
|
|
||
| <pre class="brush: js"> | ||
| let doc = new Document(); | ||
| let html = document.createElement("html"); | ||
| doc.prepend(html); | ||
|
|
||
| doc.children; // HTMLCollection [<html>] | ||
| </pre> | ||
|
|
||
| <h2 id="Specifications">Specifications</h2> | ||
|
|
||
| <table class="standard-table"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Specification</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <p>{{Compat("api.Document.prepend")}}</p> | ||
|
|
||
| <h2 id="See_also">See also</h2> | ||
|
|
||
| <ul> | ||
| <li>{{domxref("Document.append()")}}</li> | ||
| <li>{{domxref("Element.prepend()")}}</li> | ||
| </ul> |
Oops, something went wrong.