appendChild()?parent.appendChild(child) adds a node to the end of the parent’s child list (MDN). If child already exists in the document, it is moved — not copied.
Status: Baseline Widely available (since July 2015) — not Deprecated, Experimental, or Non-standard. Prefer Element.append() when you need multiple args or text strings.
parent.appendChild(child)
→ child becomes the last child of parent
→ returns child (not parent)
If child already in the document → moved here
Need a copy? → cloneNode() first
Chaining nests:
parent.appendChild(a).appendChild(b)
→ b is inside a (returns the child each time)| Goal | Prefer |
|---|---|
| One node at the end | appendChild(child) |
| Many nodes / strings | Element.append(...) |
| Insert before a sibling | insertBefore() |
appendChild()Create (or select) a node, then append it to a parent.
createElement, existing node, …).parent.appendChild(child).| Piece | Required? | Role |
|---|---|---|
parent | Yes | Node that receives the child |
child | Yes | Node to append (or a DocumentFragment) |
| Return | — | The appended child (empty fragment if fragment) |
child = createElement("p") // or an existing node
parent.appendChild(child)
→ child is last among parent.childNodes
if child already has a parent:
remove from old place, then insert at end of parent
copy needed?
parent.appendChild(child.cloneNode(true))Keep these facts handy when building DOM trees.
| Topic | Detail |
|---|---|
| Syntax | parent.appendChild(child) |
| Returns | Appended child (or empty fragment) |
| Existing node | Moved, not cloned |
| Chaining | Nests — returns child each time |
vs append() | Single Node arg vs multi + strings |
| Errors | HierarchyRequestError if tree rules break |
| Standard | Baseline Widely available (since July 2015) |
Append a new item, move an existing item, or append a clone into the list.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Create a paragraph and append it to the body (MDN-style).
const p = document.createElement("p");
p.textContent = "Hello";
document.getElementById("box").appendChild(p);createElement("p") builds a node.#box.MDN: appendChild returns the child — keep the reference.
const p = document.body.appendChild(document.createElement("p"));
p.textContent = "kept the reference";
console.log(p.parentNode === document.body); // truetextContent on that reference.Appending a node that is already in the tree moves it (MDN).
const list = document.getElementById("list");
const first = list.firstElementChild;
list.appendChild(first);
// first was removed from the start and added at the endcloneNode first.MDN warning: chained appendChild nests, it does not add siblings.
const box = document.getElementById("box");
// Nested: p2 inside p1 — NOT three siblings
box
.appendChild(document.createElement("p"))
.appendChild(document.createElement("p"));
console.log(box.children.length); // 1box.Copy with cloneNode, then append — original stays put.
const list = document.getElementById("list");
const item = document.getElementById("item");
list.appendChild(item.cloneNode(true));
console.log(list.children.length);cloneNode(true) deep-copies.Check these before building complex trees with appendChild.
MDN: a node cannot be in two places. Append moves it unless you cloneNode.
Chaining nests elements. Call appendChild separately on the parent for siblings.
Thrown for illegal trees (e.g. appending a node into its own descendant).
MDN: prefer append() when you need multiple nodes or strings on an Element.
Node.appendChild() is marked Baseline Widely available on MDN (since July 2015).
Adds a child to the end of a parent. Moves existing nodes. Returns the appended child. Prefer Element.append() for multiple arguments or strings.
Bottom line: Safe everyday DOM API. Remember: move vs clone, and chaining nests. See the MDN appendChild reference.
| Approach | Cost | Best for |
|---|---|---|
One appendChild | One layout touch | Single node |
| Many appends in a loop | Can reflow often | Avoid for large lists |
DocumentFragment then one append | One insert | Batch many children |
For many nodes, build into a fragment (or use append with multiple args), then attach once — fewer layout thrashers than N separate appends.
parent’s children.One line: appendChild puts a node last under a parent — moving it if it already lived elsewhere.
Copy a node when you need two instances in the tree.
8 people found this page helpful