JavaScript createElement(): Create and Insert DOM Elements

document.createElement() creates a new HTML element in memory. The element does not appear on the page until it is inserted into the DOM with a method such as append(), appendChild(), prepend(), or insertBefore().

const button = document.createElement("button");
button.textContent = "New Button";
document.body.append(button);

Syntax:

const element = document.createElement("tagName");

Demo: Create an element dynamically

Table of Contents

Create and append an element
Add an element to a specific parent
Create and insert a list item
Set attributes, classes, and data
textContent, createTextNode, and innerHTML
append, appendChild, prepend, and insertBefore
Common mistakes

Create and Append an Element Top ↑

The simplest workflow has three steps: create the element, set its content or properties, and insert it into the DOM.

function addElement() {
  const newButton = document.createElement("button");
  newButton.textContent = "New Button";
  document.body.appendChild(newButton);
}

The original plus2net example used appendChild(); it remains valid. Modern code can also use append(), which can append nodes and text.

Add an Element to a Specific Parent Top ↑

You do not have to append to document.body. Find any existing parent and add the new element inside it.

Demo: Add a paragraph to a parent element

const message = document.createElement("p");
message.textContent = "JavaScript section";

const parent = document.getElementById("my_div");
parent.append(message);

If the parent might not exist, check it before trying to append:

const parent = document.getElementById("my_div");

if (parent) {
  const message = document.createElement("p");
  message.textContent = "Added safely";
  parent.append(message);
}

Create and Insert a List Item Top ↑

The original example inserts a new <li> into an ordered list. insertBefore(newNode, referenceNode) places a node before an existing child. If the reference node is null, it appends at the end.

Demo: Add an item to a list

const newItem = document.createElement("li");
newItem.textContent = "Dinner";

const list = document.getElementById("my_list");
list.insertBefore(newItem, list.children[2] || null);

Set Attributes, Classes, and Data Top ↑

After creating an element, set normal DOM properties when a direct property exists. Use setAttribute() when you need a specific HTML attribute.

const link = document.createElement("a");
link.href = "https://www.plus2net.com/";
link.textContent = "Visit plus2net";
link.classList.add("btn", "btn-primary");
link.setAttribute("aria-label", "Visit plus2net home page");

For custom data-* attributes, the dataset property is convenient:

const row = document.createElement("div");
row.dataset.userId = "42";

textContent, createTextNode, and innerHTML Top ↑

Use textContent for normal text. The older document.createTextNode() method is still valid and is useful when you explicitly need a text node.

const paragraph = document.createElement("p");
const text = document.createTextNode("Plain text");
paragraph.appendChild(text);

innerHTML parses a string as HTML. Do not insert untrusted user input with innerHTML, because unsafe markup can create cross-site scripting problems. For plain text, textContent is the safer default.

Ways to Insert the New Element Top ↑

Method	Use
`parent.appendChild(node)`	Append one node and return the appended node.
`parent.append(node, text)`	Append one or more nodes or text strings.
`parent.prepend(node)`	Insert at the beginning of a parent.
`parent.insertBefore(node, reference)`	Insert before a chosen child node.
`element.before(node)` / `after(node)`	Insert relative to an existing element.

Common Mistakes Top ↑

Creating but not inserting: createElement() alone does not display the element.
Accidentally creating globals: declare variables with const or let.
Using innerHTML for text: prefer textContent unless HTML parsing is intended.
Appending to a missing parent: DOM lookup methods can return null.
Adding repeated event handlers unnecessarily: create the element once when possible and attach listeners deliberately.

Document Object getElementById Last Modified

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: