appendChild method (Internet Explorer)

The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

25 out of 39 rated this helpful - Rate this topic

Appends an element as a child to the object.

Document Object Model (DOM) Level 3 Core Specification, Section 1.4

Syntax

object.appendChild(newChild)

Parameters

newChild [in]: Type: IHTMLDOMNode
Object that specifies the element to append.

Return value

Type: IHTMLDOMNode

Returns a reference to the element that is appended to the object.

Standards information

Document Object Model (DOM) Level 3 Core Specification, Section 1.4

Remarks

The appendChild method appends elements to the end of the childNodes collection.

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.

In Microsoft Internet Explorer 6, This method now applies to the attribute object.

Examples

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


<!doctype html>
<html>
</head>
<title>Append child sample</title>
<script>
  function fnAppend() {
    var list = document.getElementById("mylist");
    var newnode = document.createElement("li");
    list.appendChild(newnode);
    newnode.innerText = "List node 5";
  }
</script>
</head>
<body>
<ul id = "mylist">
<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>
</html>

appendChild method