Revision 1074862 of ParentNode.append()

<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div>

<p>The <strong><code>ParentNode.append</code></strong> method inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</p>

<p>Differences to {{domxref("Node.appendChild()")}}:</p>

<ul>
 <li><code>ParentNode.append()</code> allows you to also append {{domxref("DOMString")}} object, whereas <code>Node.appendChild()</code> only accepts {{domxref("Node")}} objects.</li>
 <li><code>ParentNode.append()</code> has no return value, whereas <code>Node.appendChild()</code> returns the appended {{domxref("Node")}} object.</li>
 <li><code>ParentNode.append()</code> can append several nodes and strings, whereas <code>Node.appendChild()</code> can only append one node.</li>
</ul>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
[Throws, Unscopable] 
void ParentNode.append((Node or DOMString)... nodes);
</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>nodes</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_an_element">Appending an element</h3>

<pre class="brush: js">
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);

console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
</pre>

<h3 id="Appending_text">Appending text</h3>

<pre class="brush: js">
var parent = document.createElement("div");
parent.append("Some text");

console.log(parent.textContent); // "Some text"</pre>

<h3 id="Appending_an_element_and_text">Appending an element and text</h3>

<pre class="brush: js">
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>

<h3 id="ParentNode.append()_is_unscopable"><code>ParentNode.append()</code> is unscopable</h3>

<p>The <code>append()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p>

<pre class="brush: js">
var parent = document.createElement("div");

with(parent) { 
  append("foo");
}
// ReferenceError: append is not defined </pre>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(49)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(49)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
 <li>{{domxref("ParentNode.prepend()")}}</li>
 <li>{{domxref("Node.appendChild()")}}</li>
 <li>{{domxref("ChildNode.after()")}}</li>
 <li>{{domxref("NodeList")}}</li>
</ul>