Node.appendChild

  • Revision slug: DOM/Node.appendChild
  • Revision title: Node.appendChild
  • Revision id: 82435
  • Created:
  • Creator: Prnl
  • Is current revision? No
  • Comment /* Notes */ naive appendChild will break pages in 1.9

Revision Content

{{template.DomRef()}}

Summary

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

Syntax

var appendedElement = element.appendChild(child);
  • element is the parent element.
  • child is the node to append underneath element.

Example

// Create a new paragraph element, and append it to the end of the document body
var p = document.createElement("p");
document.body.appendChild(p);

Notes

If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).

This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

You can use cloneNode to make a copy of the node before appending it under the new parent. (Note that the copies made with cloneNode will not be automatically kept in sync.)

This method is not allowed to move nodes between different documents. If you want to append node from a different document (for example to display results from AJAX request) you must first use importNode.

Related methods: insertBefore, replaceChild and removeChild.


<code>appendChild</code> is one of the fundamental methods of web programming using the DOM. The <code>appendChild</code> method inserts a new node into the DOM structure of a document, and is the second part of the one-two, create-and-append process so central to building web pages programmatically.

Specification

DOM Level 2 Core: appendChild

{{ wiki.languages( { "fr": "fr/DOM/element.appendChild", "pl": "pl/DOM/element.appendChild" } ) }}

Revision Source

<p> 
{{template.DomRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">var <i>appendedElement</i> = <i>element</i>.appendChild(<i>child</i>);
</pre>
<ul><li> <code>element</code> is the parent element.
</li><li> <code>child</code> is the node to append underneath <code>element</code>.
</li></ul>
<h3 name="Example"> Example </h3>
<pre class="eval">// Create a new paragraph element, and append it to the end of the document body
var p = document.createElement("p");
document.body.appendChild(p);
</pre>
<h3 name="Notes"> Notes </h3>
<p>If <code>child</code> is a reference to an existing node in the document, <code>appendChild</code> moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).
</p><p>This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, <i>then</i> appended at the new position.
</p><p>You can use <a href="en/DOM/element.cloneNode">cloneNode</a> to make a copy of the node before appending it under the new parent. (Note that the copies made with <code>cloneNode</code> will not be automatically kept in sync.)
</p><p>This method is not allowed to move nodes between different documents. If you want to append node from a different document (for example to display results from AJAX request) you must first use <a href="en/DOM/document.importNode">importNode</a>.
</p><p>Related methods: <a href="en/DOM/element.insertBefore">insertBefore</a>, <a href="en/DOM/element.replaceChild">replaceChild</a> and <a href="en/DOM/element.removeChild">removeChild</a>.
</p><p><br>
<span class="comment">&lt;code&gt;appendChild&lt;/code&gt; is one of the fundamental methods of web programming using the DOM. The &lt;code&gt;appendChild&lt;/code&gt; method inserts a new node into the DOM structure of a document, and is the second part of the one-two, create-and-append process so central to building web pages programmatically.</span>
</p>
<h3 name="Specification"> Specification </h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107">DOM Level 2 Core: appendChild</a>
</p>{{ wiki.languages( { "fr": "fr/DOM/element.appendChild", "pl": "pl/DOM/element.appendChild" } ) }}
Revert to this revision