Parent Element .appendChild()

parentElement.appendChild(elementToAdd);

Returns the appended HTML element (the same element passed as the argument).

sample_appendChild.html

<ul id="list">
	<li>Item 1</li>
	<li>Item 2</li>
</ul>
<ul id="members"></ul>
<div id="card-container"></div>

sample_appendChild.js

// Pattern 1: Basic usage
var list = document.getElementById("list");
var newItem = document.createElement("li");
newItem.textContent = "Item 3";
list.appendChild(newItem);
// Result: Item 1, Item 2, Item 3

// Pattern 2: Dynamically generate elements from an array
var members = ["Ayanami Rei", "Ikari Shinji", "Soryu Asuka", "Katsuragi Misato", "Nagisa Kaworu"];
var memberList = document.getElementById("members");
members.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	memberList.appendChild(li);
});

// Pattern 3: Build a complex element with multiple attributes, then append it
var container = document.getElementById("card-container");
var pilots = [
	{ name: "Ayanami Rei", unit: "Unit-00", id: "rei" },
	{ name: "Ikari Shinji", unit: "Unit-01", id: "shinji" },
	{ name: "Soryu Asuka", unit: "Unit-02", id: "asuka" }
];
pilots.forEach(function(pilot) {
	var card = document.createElement("div");
	card.id = pilot.id;
	card.className = "pilot-card";
	card.setAttribute("data-unit", pilot.unit);

	var nameEl = document.createElement("strong");
	nameEl.textContent = pilot.name;
	card.appendChild(nameEl); // Append strong element inside div

	var unitEl = document.createElement("span");
	unitEl.textContent = " (" + pilot.unit + ")";
	card.appendChild(unitEl); // Append span element inside div

	container.appendChild(card); // Append the finished card element to the container
});

// Pattern 4: Use the return value of appendChild
var newLi = document.createElement("li");
newLi.textContent = "Can still be modified after appending";
var appendedEl = list.appendChild(newLi);
appendedEl.style.color = "red"; // The return value (the appended element) can be operated on

View sample page

Mistake 1: appendChild moves existing elements instead of copying them

If you call appendChild() on an element that already exists in the DOM, it is removed from its original position and moved to the new location. To copy an element, clone it with cloneNode(true) first.

var item = document.getElementById("item");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
list1.appendChild(item);
list2.appendChild(item); // NG: item disappears from list1 and moves to list2

The following example shows how this works in practice:

var item = document.getElementById("item");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
list1.appendChild(item);
list2.appendChild(item.cloneNode(true)); // OK: clone first, then append

Mistake 2: Passing a string directly to appendChild

appendChild() accepts an Element object, not a string. Passing a string will throw an error. Use textContent to set text, or create a text node with createTextNode() and pass that.

var list = document.getElementById("list");
list.appendChild("Yagami Iori"); // NG: strings cannot be passed

The following example shows how this works in practice:

var list = document.getElementById("list");
var li = document.createElement("li");
li.textContent = "Yagami Iori"; // OK: create an element first, then append
list.appendChild(li);

parentElement.appendChild() is the fundamental method for adding an element to the DOM. The element is inserted at the end of the target parent element (after its last child).

Note: if you call parentElement.appendChild() on an element that already exists in the DOM, it is removed from its original position and moved to the new location. Because this is a move rather than a copy, if you need to place the same element in multiple locations, clone it first with cloneNode(true) and then append the clone.

To insert an element at a specific position rather than at the end, use insertBefore().