Parent Element .appendChild() Since: DOM Level 1（1998）

parentElement.appendChild(elementToAdd);

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

<ul id="list">
	<li>Item 1</li>
	<li>Item 2</li>
</ul>

var list = document.querySelector("#list");

// Create a new HTML element and append it.
var newItem = document.createElement("li");
newItem.textContent = "Item 3";
list.appendChild(newItem);
// Result: Item 1, Item 2, Item 3

// Append multiple HTML elements in sequence.
var fruits = ["Apple", "Orange", "Grape"];
fruits.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	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().