HTML DOM Element appendChild()

❮ Previous ❮ Element Object Reference Next ❯

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

Before:

Coffee
Tea

After:

Coffee
Tea
Water

Try it Yourself »

Move an item from one list to another:

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

Before:

Coffee
Tea

Water
Milk

After:

Coffee
Tea
Milk

Water

Try it Yourself »

More examples below.

Description

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

Syntax

element.appendChild( node)

node.appendChild( node)

Parameters

Parameter	Description
node	Required. The node to append.

Return Value

Type	Description
Node	The appended node.

More Examples

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	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Previous ❮ Element Object Reference Next ❯

码农教程 - 一技在手,衣食无忧!

HTML DOM Element appendChild()

Examples

Description

See Also:

Related Document Methods:

Syntax

Parameters

Return Value

More Examples

Browser Support