Creating DOM Elements in JavaScript: Complete Guide

To create DOM elements in JavaScript, use document.createElement, which makes an element in memory that is not yet visible on the page. You then configure its content, attributes, and styles.

Finally, you attach it to a parent that is already part of the visible page. This is how you add fresh content without reloading it.

javascript

const paragraph = document.createElement("p");
paragraph.textContent = "This paragraph was created by JavaScript.";
document.body.appendChild(paragraph);

Three steps: create, configure, append. The new paragraph appears at the end of the body. It looks and behaves exactly like a paragraph that was written in the HTML file.

How createElement Works

createElement takes one argument: the HTML tag name as a string. It returns a new, empty element that exists only in JavaScript memory.

The element is not visible until you append it to a parent that is already in the DOM. Creating the element and inserting it are always two separate steps.

javascript

const div = document.createElement("div");
const button = document.createElement("button");
const image = document.createElement("img");

Each call returns a different type of element: a div, a button, an img. None of them are on the page yet, and none of them share any relationship with each other or with the existing document.

They are blank slates ready for configuration, and each one behaves like its real HTML counterpart as soon as it is inserted, supporting the same properties and methods you would expect from that tag.

Configuring the Element

Before appending, set the element's content, attributes, and classes. This is more efficient than appending first and then modifying, because each DOM change triggers a visual update.

javascript

const card = document.createElement("article");
card.className = "card highlighted";
card.setAttribute("data-id", "101");
card.textContent = "Card content goes here.";

The element now has a class, a custom data attribute, and text content. It is fully configured but still in memory, invisible to anyone viewing the page. The next step is to place it on the page.

You can also build more complex structures by creating child elements and appending them before the final insertion:

javascript

const card = document.createElement("article");
const heading = document.createElement("h3");
heading.textContent = "Title";
card.appendChild(heading);
 
const body = document.createElement("p");
body.textContent = "Description text.";
card.appendChild(body);

The card now contains a heading and a paragraph. The entire subtree, card plus its children, can be appended to the page in a single operation.

Appending to the Page

Once the element is configured, attach it to a parent that is already visible. The parent determines where the new element appears.

javascript

const container = document.querySelector("#card-list");
container.appendChild(card);

The card appears as the last child inside the card-list container. If you want it at the start instead, use prepend or insertBefore rather than appendChild, since appendChild always places the new node after everything the parent already contains.

Building a Complete Example

Here is a function that ties the create, configure, and append steps together into one reusable piece of code. It creates a list item from data and appends it to a list, and this pattern appears in almost every dynamic web application, from to-do apps to comment sections:

javascript

function addItem(listId, text) {
  const list = document.querySelector(listId);
  const item = document.createElement("li");
  item.textContent = text;
  list.appendChild(item);
}
 
addItem("#todo-list", "Buy groceries");
addItem("#todo-list", "Walk the dog");

Each call creates a new list item, sets its text, and appends it. The function works for any list on the page because the listId is a parameter, so the same three lines handle every item instead of repeating create, configure, and append calls by hand.

You could extend this same pattern to accept an object of attributes, or to build more complex children before appending, without changing the overall shape of create, configure, append.

Where to Go Next

Creating elements pairs with appending them to the DOM. For attaching behavior to your new elements, see how to add event listeners.