JavaScriptDomBeginner

appendChild()

Appends a node as the last child of a parent element (moves if already in DOM).

Review the syntaxStudy the examplesOpen the coding app
parent.appendChild(node)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Appends a node as the last child of a parent element (moves if already in DOM).

The 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; this ensures a node cannot exist in two places simultaneously. From a performance perspective, calling appendChild() repeatedly on the live DOM can trigger expensive reflows and repaints; using a DocumentFragment is the preferred pattern for batch updates to minimize layout thrashing. A HierarchyRequestError will occur if you attempt to append a node to itself or into one of its own descendants. Unlike the modern append() method, appendChild() only accepts a single Node object and returns the appended node rather than undefined, making it useful for chaining property assignments immediately after insertion.

Quick reference

Syntax

parent.appendChild(node)

Inputs

Parameters

nodeNode · The DOM node to append.

See it in practice

Examples

1

Creating and adding a new element

var container = document.createElement('div');
var paragraph = document.createElement('p');
paragraph.textContent = 'Hello World';
var returnedNode = container.appendChild(paragraph);

console.log(container.childNodes.length);
console.log(returnedNode === paragraph);
Output:
1 true

Creates a new paragraph element, sets its text, and appends it to a container. The method returns the node that was just appended.

2

Moving an existing element

var sectionA = document.createElement('section');
var sectionB = document.createElement('section');
var span = document.createElement('span');
span.textContent = 'I move';

sectionA.appendChild(span);
// Moving span from sectionA to sectionB
sectionB.appendChild(span);

console.log(sectionA.childNodes.length);
console.log(sectionB.childNodes.length);
Output:
0 1

Demonstrates that appending an existing node moves it to the new location instead of cloning it.

3

Efficient batch updates with DocumentFragment

var list = document.createElement('ul');
var fragment = document.createDocumentFragment();
var items = ['Item 1', 'Item 2', 'Item 3'];

items.forEach(function(text) {
  var li = document.createElement('li');
  li.textContent = text;
  fragment.appendChild(li);
});

list.appendChild(fragment);
console.log(list.children.length);
Output:
3

Uses a DocumentFragment to stage multiple nodes in memory. When the fragment is appended to the list, only one reflow is triggered on the document.

Debug faster

Common Errors

1

TypeError

Cause: Attempting to append a string instead of a Node object.

Fix: Use document.createTextNode(), create an element first, or use the element.append() method if modern browser support is guaranteed.

var div = document.createElement('div');
div.appendChild('This will fail'); // Throws TypeError
2

DOMException (HierarchyRequestError)

Cause: Attempting to append a node as a child of itself, or appending an ancestor node to one of its own descendants.

Fix: Check the node hierarchy to ensure you are not creating a circular reference in the DOM tree.

var outer = document.createElement('div');
var inner = document.createElement('div');
outer.appendChild(inner);
inner.appendChild(outer); // Throws HierarchyRequestError

Runtime support

Compatibility

BrowserAll browsersDOM Level 2

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Appends a node as the last child of a parent element (moves if already in DOM).

node: The DOM node to append.

TypeError: Use document.createTextNode(), create an element first, or use the element.append() method if modern browser support is guaranteed. DOMException (HierarchyRequestError): Check the node hierarchy to ensure you are not creating a circular reference in the DOM tree.