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

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().