HTML DOM Element appendChild()

Examples

Append an item to a list:

const node = document.createElement(“li”);
const textnode = document.createTextNode(“Water”);
node.appendChild(textnode);
document.getElementById(“myList”).appendChild(node);

• Coffee
• Tea

Before:

• Coffee
• Tea
• Water

After:

Try it Yourself »

Move an item from one list to another:

const node = document.getElementById(“myList2”).lastElementChild;
document.getElementById(“myList1”).appendChild(node);

• Coffee
• Tea

• Water
• Milk

Before:

• Coffee
• Tea
• Milk

• Water

After:

Try it Yourself »

More examples below.

Definition and Usage

The appendChild() method appends a node (element) as the last child of an element.

Syntax

element.appendChild(node)

or

node.appendChild(node)

Parameters

Parameter
Description

node
Required.
The node to append.

Return Value

Type
Description

NodeThe appended node.

More Examples

or

To create a paragraph with a text.

• Create a paragraph element
• Create a text node
• Append the text node to the paragraph
• Append the paragraph to the document.

Create a <p> element and append it to a <div> element:

const para = document.createElement(“p”);
const node = document.createTextNode(“This is a paragraph.”);

para.appendChild(node);
document.getElementById(“myDIV”).appendChild(para);

Try it Yourself »

Create a <p> element and append it to the document’s body:

const para = document.createElement(“P”);
const node = document.createTextNode(“This is a paragraph.”);

para.appendChild(node);
document.body.appendChild(para);

Try it Yourself »

Browser Support

element.appendChild() is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome
IE
Edge
Firefox
Safari
Opera

Yes
9-11
Yes
Yes
Yes
Yes