Home Library Learn Downloads Support Community
Sign in | United States - English | |
22 out of 32 rated this helpful - Rate this topic

appendChild method

[This documentation is preliminary and is subject to change.]

Appends an element as a child to the object.

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

Syntax

object.appendChild(newChild)

Standards information

Parameters

newChild [in]

Type: IHTMLDOMNode

Object that specifies the element to append.

Return value

Type: ObjectReturns a reference to the element that is appended to the object.

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.

Copy 

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.

Copy 

<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>

See also

a
abbr
acronym
address
attribute
article
aside
b
bdo
big
blockQuote
body
button
caption
center
cite
code
col
colGroup
comment
dd
del
dfn
dir
div
dl
dt
documentType
em
figcaption
figure
fieldSet
font
footer
form
frameSet
head
header
hgroup
hn
html
i
iframe
input type=button
input type=checkbox
input type=file
input type=image
input type=password
input type=radio
input type=reset
input type=submit
input type=text
ins
kbd
label
legend
li
listing
map
mark
marquee
menu
nav
nextID
ol
option
p
plainText
pre
ProcessingInstruction
q
s
samp
section
small
span
strike
strong
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
tt
u
ul
var
xmp
Reference
cloneNode
insertBefore
Conceptual
About the W3C Document Object Model

 

 

Build date: 2/14/2012

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
documget.ElementsByTagName('body')[0].appendChild - additional reason for not working
The antivirus plugin also interferes with script
d.getElementsByTagName('body')[0].appendChild(d.createElement('div')
History
body.appendChild does work in IE9, but not when you have DivX plugin enabled!
A while back, I wrote that body.appendChild doesn't work in IE9, however, after searching for ages on Google, I've found that other people had the same issue and that it was caused by "Divx Plus Web Player HTML5 and DivX HiQ"-plugins. By disabling these plugins, everything works like a charm.
History
<script>
Seems as if since IE9 appendChild() also applies to <script>
History
IE9: appendChild to body doesn't work!
Appending a div (or any other element, I assume) to the body of IE9 is NOT possible. * The code (in the header): <script type="text/javascript">function appendMyChildElement(){var div = document.createElement('div'); div.innerHTML = 'This won\'t show in IE9!'; document.body.appendChild(div);</script> * The code (in the body): <a href="javascript:appendMyChildElement();">appendChild</a. The newly created element won't be added to the body-element. It works in IE6/7/8 - FF4 - Chrome - Opera - Safari, but not in IE9
History
About tables
TR elements appended to children of TBODY do not become table rows.
History
Add child by Key
Does the appendChild also support appendChild by key? If that is not. it will be very different to do a lot of thing. I had to have a local collection to store this child
History
Clone node in main window, append to modeless dialog
I'm having trouble appending a node that has been cloned form the parent window to a modeless child window. I am able to clone the node and access all its properties from within the modeless window, but when I try to append it I get an "No such interface supported" message. I can append nodes that are created within the modeless window.

Any tips?
History