HTML DOM appendChild() method

HTML DOM Element Object

appendChild()The purpose of the method is to add a node to the end of the child node list of the specified parent node.

If the given child node is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (see the "More examples" section below).

UsageinsertBefore()The method can insert a new child node before the specified existing child node.

Syntax:

node.appendChild(node)

var newElem = document.createElement("h3　　　//　Create a new h3Element
var newContent = document.createTextNode("Hello, nice to meet you!");　//　Create some text content　
newElem.appendChild(newContent);　//　　Add the text node to the newly created h3　
document.body.appendChild(newElem);　　//　　Add the newly created element and its content to the DOM

Note:If you need to create a new element with text, remember to create the text as a Text node, then append it to the element, and then append the element to the document.

Browser compatibility

All browsers fully support the appendChild() method:

Parameter value

Technical details

More examples

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

var para = document.createElement("p");　　　//　Create a <p> node
var txt = document.createTextNode("This is a paragraph.");//　Create a text node
para.appendChild(txt);//　Append the text to <p>
document.getElementById("demo").appendChild(para);//　Append <p> to <div>

Create a <p> element and append it to the end of the document body:

var para = document.createElement("p");　　　//　Create a <p> node
var txt = document.createTextNode("This is a paragraph.");//　Create a text node
para.appendChild(txt);//　Append the text to <p>
document.body.appendChild(para);//　Append <p> to body

This example moves an element from its current position to a new position:

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1).appendChild(elem);

Related References

HTML DOM Reference:node.hasChildNodes() method

HTML DOM Reference:node.insertBefore() method

HTML DOM Reference:node.removeChild() method

HTML DOM Reference:node.replaceChild() method

HTML DOM Reference:document.createElement() method

HTML DOM Reference:document.createTextNode() method

HTML DOM Reference:document.adoptNode() method

HTML DOM Reference:document.importNode() method

HTML DOM Element Object