Table of Contents

JavaScript appendChild() is a Document Object Model (DOM) method for adding a node to the end of another node’s list of children. In everyday code, you use parent.appendChild(child) to place a new element, text node, or other node inside an existing element.

What does appendChild() do?

The appendChild() method takes one node and attaches it as the last child of the specified parent. The node must already exist, so a common pattern is to create an element with document.createElement(), fill it in, and append it to a container. The method returns the appended node.

Syntax

parentNode.appendChild(childNode);
  • parentNode is the element or document fragment that will receive the child.
  • childNode is the node to insert, such as an element created with createElement().

Example 1: Add a paragraph

This runnable example creates a paragraph and places it inside a container:

<div id="message-box"></div>

<script>
  const box = document.querySelector("#message-box");
  const paragraph = document.createElement("p");

  paragraph.textContent = "This paragraph was added to the page.";
  box.appendChild(paragraph);
</script>

First, the script finds the container. It then creates a paragraph, sets its text with textContent, and appends it. Setting text this way treats the value as text rather than executable HTML.

Example 2: Build a list from an array

Use a loop to add a child for every value in a collection:

<ul id="lesson-list"></ul>

<script>
  const lessons = ["Select elements", "Create nodes", "Append children"];
  const list = document.querySelector("#lesson-list");

  for (const lesson of lessons) {
    const item = document.createElement("li");
    item.textContent = lesson;
    list.appendChild(item);
  }
</script>

Each loop iteration creates a separate <li>. Because each call appends at the end, the list appears in the same order as the array.

Appending an existing node moves it

A DOM node cannot be in two places at once. If you append a node that already has a parent, JavaScript moves it from the old parent to the new one:

const item = document.querySelector("#lesson-list li");
document.querySelector("#completed-list").appendChild(item);

To keep the original and add a copy, clone the node first. Pass true to copy its descendants too:

const copy = item.cloneNode(true);
document.querySelector("#saved-list").appendChild(copy);

appendChild() with text

You can append a text node when you need to add text without creating a paragraph or span:

const note = document.createElement("p");
const text = document.createTextNode("Remember to save your work.");

note.appendChild(text);
document.querySelector("#notes").appendChild(note);

For most plain text, setting textContent is shorter and clearer. Avoid putting untrusted strings into innerHTML, because parsing user input as markup can introduce cross-site scripting vulnerabilities.

appendChild() vs. append()

Both methods add content at the end of an element. appendChild() accepts a single node and returns that node. The newer append() method accepts multiple nodes or strings and returns no value. Use appendChild() when you need its returned node or when working in code that specifically expects this established method; use append() when its multiple-argument convenience helps.

Common mistakes

  • Appending to a missing parent: querySelector() returns null when no matching element exists, and null.appendChild() causes an error. Check your selector and ensure the script runs after the parent is available.
  • Passing a string directly: appendChild() expects a node, so parent.appendChild("Hello") is invalid. Create a text node or use textContent or append().
  • Expecting a copy: appending an existing node moves it. Use cloneNode() when you need a duplicate.
  • Forgetting that it appends at the end: use insertBefore() when the new node belongs before a particular child.
  • Creating a node but never attaching it: calling createElement() alone does not display anything. Append the result to an element connected to the document.

What does appendChild() return?

It returns the node that was appended. You can store the result, although the original variable continues to refer to the same node.

Can I append one element to multiple parents?

Not at the same time. Appending it to another parent moves it. Clone the node if it must appear in both places.

Can appendChild() add several nodes in one call?

No. It takes one node. Call it once per node, or use append() when you want to add multiple nodes or strings together.

Categorized in:

Javascript, Js DOM,