Add DocumentFragment.prepend page

files/en-us/web/api/documentfragment/index.html

@@ -43,6 +43,8 @@ <h2 id="Methods">Methods</h2>
 <dl>
  <dt>{{DOMxRef("DocumentFragment.append()")}}</dt>
  <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the document fragment.</dd>
+ <dt>{{DOMxRef("DocumentFragment.prepend()")}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the document fragment.</dd>
  <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
  <dd>Returns the first {{domxref("Element")}} node within the <code>DocumentFragment</code>, in document order, that matches the specified selectors.</dd>
  <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>

files/en-us/web/api/documentfragment/prepend/index.html

@@ -0,0 +1,79 @@
+---
+title: DocumentFragment.prepend()
+slug: Web/API/DocumentFragment/prepend
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - DocumentFragment
+  - Reference
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <strong><code>DocumentFragment.prepend()</code></strong> method
+  inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before
+  the first child of the document fragment. </span>{{domxref("DOMString")}} objects
+  are inserted as equivalent {{domxref("Text")}} nodes.</p>
+
+<p>This method prepends a child to a <code>DocumentFragment</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_an_element_to_a_document_fragment">Prepending an element to a document fragment</h3>
+
+<pre class="brush: js">
+let fragment = new DocumentFragment();
+let div = document.createElement("div");
+let p = document.createElement("p");
+fragment.append(p);
+fragment.prepend(div);
+
+fragment.children; // HTMLCollection [&lt;div&gt;, &lt;p&gt;]
+</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.DocumentFragment.prepend")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+  <li>{{domxref("DocumentFragment.append()")}}</li>
+  <li>{{domxref("Element.prepend()")}}</li>
+</ul>