Node.appendChild

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position. The Node.cloneNode() can be used to make a copy of the node before appending it under the new parent. Note that the copies made with cloneNode will not be automatically kept in sync.

If the given child is a DocumentFragment, the entire contents of the DocumentFragment are moved into the child list of the specified parent node.

Syntax

var aChild = element.appendChild(aChild);

Returns

The returned value is the appended child except when the given child is a DocumentFragment, in which case the empty DocumentFragment is returned.

Notes

Chaining may not work as expected due to appendChild() returning the child element:

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

Sets aBlock to <b></b> only, which is not what you probably want.

Example

// Create a new paragraph element, and append it to the end of the document body
var p = document.createElement("p");
document.body.appendChild(p);

Specifications

Browser compatibility

See also

• Node.removeChild()
• Node.replaceChild()
• Node.insertBefore()
• Node.hasChildNodes()
• ParentNode.append()