DHTML Methods

---

DOM Level 1 Specification.

Appends an element as a child to the object.

object.appendChild ( oNewElement ) 

oNewElement

Required. The object address or reference of the new child node ( an element created with the createElement method ), to be appended at the end of the list of children of this node.

Returns the new child node successfully appended to the list.

The appendChild method adds a new node to the end of the list of children, or the childNodes collection of the object. If the new child is already in the tree, it is first removed.

If the node to add is a DocumentFragment object, the entire contents of the document fragment are moved into the child list of this node.

Note that this is equivalent to calling insertBefore ( newChild, null ). For complete information, see the documentation for insertBefore.

The following sample demonstrates the use of the appendChild method to add an item to an unordered list.

<script language="JavaScript">
function append ( ) {
   var oNewNode = document.createElement ( "li" );
   oList.appendChild ( oNewNode );
   oNewNode.innerText = "List node " + ( oList.childNodes.length -1 );
}
</script>

<ul id=oList>
   <li>List node 1
   <li>List node 2
   <li>List node 3
</ul>

<input type=button value="Append Child" onclick="append ( )">

 Show me 

cloneNode, insertBefore, removeChild