Appending Elements to the DOM in JS: Full Guide

To append elements to the DOM, you create or select an element, then attach it to the right parent using one of four methods covered here. This is how you add new content to a page after it loads, whether that is a search result, a chat message, or a new item in a list.

The diagram shows the result: an unordered list with two items, where the second was added by JavaScript after the page loaded. There are four main methods for achieving this, each with different tradeoffs.

appendChild: The Classic Method

appendChild is the original way to add a node. It adds one element as the last child of a parent and returns the added node.

javascript

const list = document.querySelector("#items");
const newItem = document.createElement("li");
newItem.textContent = "Banana";
list.appendChild(newItem);

The new list item appears at the end of the list. If the parent already had three children, the new one becomes the fourth and final child. appendChild only accepts a single node argument, so adding multiple elements requires multiple calls.

A useful detail: if the node you pass to appendChild already exists in the DOM, it moves rather than copies. The element is detached from its old parent and attached to the new one.

append: The Modern Flexible Method

The append method is newer and more flexible. It accepts multiple nodes in one call and can also accept plain text strings directly.

javascript

const container = document.querySelector("#content");
 
container.append(
  "Some text before the heading. ",
  document.createElement("hr"),
  "Some text after the divider."
);

Three things are added in one call: a text string, a horizontal rule element, and another text string. append does not return a value, unlike appendChild which returns the appended node.

For most modern projects, append is the preferred method because of its flexibility. You rarely need to build a text node manually just to insert a string, and mixing several nodes into one call keeps related DOM updates together instead of spread across several statements.

insertBefore: Placing Between Siblings

Sometimes you need to insert an element at a specific position, not just at the end. insertBefore places a new node immediately before an existing child.

javascript

const list = document.querySelector("#items");
const secondItem = list.children[1];
const newItem = document.createElement("li");
newItem.textContent = "Inserted item";
list.insertBefore(newItem, secondItem);

The new item appears just before what was previously the second item in the list. The old second item shifts down to third position.

If you pass null as the second argument, insertBefore behaves like appendChild and appends to the end. This fallback is useful when the reference sibling is chosen dynamically and might not exist, since it lets the same line of code handle both cases without a separate branch.

insertAdjacentHTML: HTML Strings at Precise Positions

insertAdjacentHTML is the fastest way to insert HTML markup without replacing existing content. You specify a position and an HTML string, and the browser parses and inserts it.

The four position values control where the HTML lands relative to the target element:

javascript

const section = document.querySelector("#posts");
 
section.insertAdjacentHTML("beforeend", "<article><h3>New Post</h3></article>");

The new article appears as the last child inside the section. Use "afterbegin" to insert at the start instead.

Since insertAdjacentHTML uses HTML strings, the same safety rules as innerHTML apply: do not pass user input directly to it. Reserve it for markup you control, such as static templates or server-rendered fragments you already trust.

Where to Go Next

To create the elements you append, see creating DOM elements in JavaScript. To remove elements you no longer need, see removing HTML elements. For attaching events to your new elements, see how to add event listeners.