appendChild

Summary

Appends an element as a child to the object.

Syntax

var appendedChild = node.appendChild(/* see parameter list */);

Parameters

newChild

Data-type: DOM Node

The child to append.

Return Value

Returns an object of type DOM NodeDOM Node

The appended child.

Examples

This example uses the appendChild method to add an item to an unordered list.

<!doctype html>
<script>
function fnAppend(){
   var oNewNode = document.createElement("LI");
   oList.appendChild(oNewNode);
   oNewNode.innerText="List node 5";
}
</script>
<body>
<ul id = oList>
<li>List node 1</li>
<li>List node 2</li>
<li>List node 3</li>
<li>List node 4</li>
</ul>
<input
   type = "button"
   value = "Append Child"
   onclick = "fnAppend()" />
</body>

Usage

 Use this method to append elements to the end of the childNodes collection.

Notes

To display new elements on the page, you must append them within the body element. For example, the following syntax demonstrates how to add a div element to the body.

var oDiv=document.createElement("DIV");
document.body.appendChild(oDiv);

This method is accessible at run time. If elements are removed at run time, before the closing tag is parsed, areas of the document might not render. Windows Internet Explorer 9. Exceptions are only supported when webpages are displayed in IE9 Standards mode.

Related specifications

DOM Level 3 Core: Recommendation

Attributions

Mozilla Developer Network : [Node.appendChild Article]
Microsoft Developer Network: [appendChild Method Article]