Web/API/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() method 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.

Newer API available! The ParentNode.append() method supports multiple arguments and appending strings.

Syntax

element.appendChild(aChild)

Parameters

aChild: The node to append to the given parent node (commonly an element).

Return value

The returned value is the appended child (aChild), except when aChild 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:

let aBlock = document.createElement('block').appendChild( document.createElement('b') );

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

Example

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

Specifications

Specification	Status	Comment
DOMThe definition of 'Node.appendChild()' in that specification.	Living Standard	No change from Document Object Model (DOM) Level 3 Core Specification.
Document Object Model (DOM) Level 3 Core SpecificationThe definition of 'Node.appendChild()' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 2 Core Specification.
Document Object Model (DOM) Level 2 Core SpecificationThe definition of 'Node.appendChild()' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 SpecificationThe definition of 'Node.appendChild()' in that specification.	Obsolete	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`appendChild`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5	Opera Full support 7	Safari Full support 1.1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support