The JavaScript appendChild() method

Q: What is the difference between appendChild() and append()?

append() can insert multiple nodes and plain text and returns nothing; appendChild() takes one node and returns it.

Q: How do I add an element to the start instead of the end?

Use parent.prepend(node) (or the older insertBefore) to insert at the beginning.

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The appendChild() method adds a node as the last child of an element, putting it on the page. list.appendChild(li) inserts li at the end of list. It pairs with createElement(). The newer append() is more flexible — it also accepts text and multiple nodes.

Overview

appendChild() attaches a node to a parent as its final child. It's the step that makes a created element actually appear — build the element, then parent.appendChild(el) to insert it at the end of that parent's children.

One behavior surprises people: if the node is already in the document, appendChild() moves it rather than copying it. A node can only exist in one place in the tree, so appending an existing element relocates it to the new parent. To duplicate instead, clone it first with node.cloneNode(true).

The modern alternative, append(), is worth knowing: it can add several nodes at once, accepts plain strings as text (parent.append("hello", el)), and returns nothing. appendChild() takes a single node and returns it. Both are fine; append() is a little more convenient for everyday work, while appendChild() remains the classic, widely-seen choice.

Syntax

parent.appendChild(node)

const li = document.createElement("li");
list.appendChild(li);  // adds li as the last child of list

Parameters

The appendChild() method accepts the following parameters.

Parameter	Description
`node`	The node to insert as the last child of the parent. If it's already in the document, it is moved here.

Example

Live example

<div id="box" style="font:15px system-ui"></div>
<script>
  const box = document.getElementById('box');

  for (let i = 1; i <= 3; i++) {
    const tag = document.createElement('span');
    tag.textContent = 'Tag ' + i + '  ';
    box.appendChild(tag);
  }
</script>

Best practices

Pair it with createElement() to build and insert elements.
Remember it moves an existing node — clone with cloneNode(true) if you want a copy.
Consider the newer append() when you want to add text or several nodes at once.
Append into a DocumentFragment first when inserting many nodes, then append the fragment once.

Frequently asked questions

What does appendChild() do?

It adds a node as the last child of an element, inserting it into the page at that position.

Why does appendChild() move my element instead of copying it?

A node can only be in one place in the DOM, so appending an existing node relocates it. Use cloneNode(true) to insert a copy instead.

What is the difference between appendChild() and append()?

append() can insert multiple nodes and plain text and returns nothing; appendChild() takes one node and returns it.

How do I add an element to the start instead of the end?

Use parent.prepend(node) (or the older insertBefore) to insert at the beginning.

append() classList

References