JavaScript Node appendChild() Method

What You’ll Learn

The Node.appendChild() method adds a node to the end of a parent’s children. Learn how it moves existing nodes, what it returns, how DocumentFragment works, and how it compares to Element.append().

Introduction

Building UI in the DOM usually means creating elements and attaching them to parents. appendChild() is the classic way to put one node at the end of another node’s children.

A critical beginner surprise: if the child is already in the document, appendChild() moves it. A node cannot live in two places at once. Use cloneNode() when you need a copy.

Understanding appendChild()

MDN: appendChild() adds a node to the end of the list of children of a specified parent node.

• New node — created with createElement / createTextNode, then appended.
• Existing node — removed from its old parent and attached to the new one.
• DocumentFragment — its children move into the parent; the fragment is emptied.
• Invalid trees — may throw HierarchyRequestError (cycles, wrong node types, etc.).

📝 Syntax

parent.appendChild(child);

Parameters

• child — The node to append (commonly an Element or Text).

Return value

The appended child node. For a DocumentFragment, the emptied fragment is returned after its contents move.

⚖️ appendChild() vs Element.append()

MDN notes you can prefer Element.append() when your parent is an element and you want multiple arguments or string support. Both are Baseline and valid in modern apps.

Examples Gallery

Examples follow MDN Node.appendChild() patterns. Use View Output or Try It Yourself for each case.

const p = document.createElement("p");
p.textContent = "Hello from appendChild";
document.getElementById("host").appendChild(p);

console.log(document.getElementById("host").lastChild.textContent);
// "Hello from appendChild"

Hello from appendChild

const item = document.getElementById("item");
const boxA = document.getElementById("boxA");
const boxB = document.getElementById("boxB");

console.log(boxA.contains(item)); // true
boxB.appendChild(item);
console.log(boxA.contains(item)); // false
console.log(boxB.contains(item)); // true

true
false
true

const host = document.getElementById("host");

// Good: keep a reference to the new paragraph
const p = host.appendChild(document.createElement("p"));
p.textContent = "First";

// Bad for siblings: each call returns the child, so this nests
host
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"));

console.log(host.children.length);           // 2 (First + outer p)
console.log(host.lastChild.children.length); // 1 (nested p)

2
1

const fragment = document.createDocumentFragment();
const li = fragment
  .appendChild(document.createElement("section"))
  .appendChild(document.createElement("ul"))
  .appendChild(document.createElement("li"));
li.textContent = "hello world";

document.getElementById("host").appendChild(fragment);

console.log(document.querySelector("#host li").textContent);
// "hello world"
console.log(fragment.childNodes.length); // 0 (emptied)

hello world
0

const source = document.getElementById("source");
const target = document.getElementById("target");

const copy = source.cloneNode(true);
target.appendChild(copy);

console.log(source.parentElement.id); // still "left"
console.log(target.lastChild.textContent.trim());
// "Card"

left
Card

🚀 Common Use Cases

• Adding list items, cards, or messages created with createElement.
• Moving a UI node from one container to another (drag-and-drop style).
• Building a tree in a DocumentFragment, then attaching once for fewer reflows.
• Keeping a reference to the new child via the return value for further setup.
• Duplicating a template node with cloneNode + appendChild.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• A node cannot be in two places; append moves, clone if you need a duplicate.
• Invalid insertions can throw HierarchyRequestError (for example appending a node as its own ancestor).
• Related: textContent, cloneNode(), childNodes, lastChild, JavaScript hub.

💡 Best Practices