Creating HTML Elements with JavaScript DOM Guide

Learn how to create HTML elements dynamically with JavaScript. Master createElement, createTextNode, DocumentFragment, and programmatic DOM construction for interactive web apps.

JavaScriptbeginner

RuneHub Team

February 28, 2026

10 min read

RuneHub Team

Feb 28, 2026

10 min read

Building HTML elements with JavaScript is how you make web pages dynamic. Every time you add a new item to a list, display search results, render a notification, or build a data table from an API response, you are creating DOM elements programmatically. This guide covers every technique from the basic createElement method to performance-optimized batch creation with DocumentFragment.

Creating Elements with document.createElement()

The createElement method creates a new HTML element in memory. The element exists but is not visible on the page until you add it to the DOM.

javascript

// Create a new <div> element
const div = document.createElement("div");
 
// Create other elements
const paragraph = document.createElement("p");
const heading = document.createElement("h2");
const button = document.createElement("button");
const image = document.createElement("img");
const anchor = document.createElement("a");
const input = document.createElement("input");
const list = document.createElement("ul");
const listItem = document.createElement("li");

Setting Content and Attributes

After creating an element, configure it before adding it to the DOM:

javascript

const card = document.createElement("div");
 
// Set text content
card.textContent = "Hello, World!";
 
// Set attributes
card.id = "main-card";
card.className = "card featured";           // className for class attribute
card.setAttribute("data-id", "42");         // Custom data attributes
card.setAttribute("role", "article");       // ARIA attributes
 
// Set styles (inline, prefer classList for styling)
card.style.padding = "16px";
card.style.borderRadius = "8px";
 
// Set classes using classList (preferred over className)
card.classList.add("card", "shadow", "rounded");
 
// Create an image element
const img = document.createElement("img");
img.src = "/images/hero.jpg";
img.alt = "Hero image description";
img.width = 400;
img.height = 300;
img.loading = "lazy";
 
// Create a link
const link = document.createElement("a");
link.href = "/tutorials/javascript";
link.textContent = "JavaScript Tutorials";
link.target = "_blank";
link.rel = "noopener noreferrer";

Comparison: Property vs setAttribute

Method	Syntax	Best For
Property assignment	`element.id = "main"`	Standard HTML properties (id, src, href, value)
setAttribute	`element.setAttribute("data-id", "5")`	Custom attributes, data-* attributes, ARIA
classList	`element.classList.add("active")`	CSS classes (preferred over className)

javascript

const input = document.createElement("input");
 
// Properties (reflected in the DOM automatically)
input.type = "email";
input.name = "userEmail";
input.placeholder = "Enter your email";
input.required = true;
input.value = "hello@example.com";
 
// setAttribute (needed for non-standard or data attributes)
input.setAttribute("data-validate", "email");
input.setAttribute("aria-label", "Email address");
input.setAttribute("autocomplete", "email");

Creating Text Nodes

While textContent is the easiest way to add text, createTextNode gives you more control when you need to mix text with other elements:

javascript

// Simple: use textContent
const paragraph = document.createElement("p");
paragraph.textContent = "This is a simple paragraph.";
 
// Advanced: mix text nodes with elements
const paragraph2 = document.createElement("p");
paragraph2.appendChild(document.createTextNode("Click "));
 
const link = document.createElement("a");
link.href = "/help";
link.textContent = "here";
paragraph2.appendChild(link);
 
paragraph2.appendChild(document.createTextNode(" for more information."));
// Result: "Click here for more information." (with "here" as a link)

When to Use createTextNode vs textContent

javascript

// Use textContent: replacing ALL content with plain text
element.textContent = "New text content"; // Fast and simple
 
// Use createTextNode: adding text alongside other nodes
const span = document.createElement("span");
span.appendChild(document.createTextNode("Price: "));
 
const strong = document.createElement("strong");
strong.textContent = "$29.99";
span.appendChild(strong);
 
// Result: "Price: $29.99" (with price bolded)

Building Nested Element Structures

Real-world UI components are nested structures. Build them bottom-up or top-down:

javascript

// Build a card component
function createProductCard(product) {
  // Container
  const card = document.createElement("article");
  card.className = "product-card";
  card.setAttribute("data-product-id", product.id);
 
  // Image
  const img = document.createElement("img");
  img.src = product.imageUrl;
  img.alt = product.name;
  img.className = "product-image";
  img.loading = "lazy";
 
  // Content wrapper
  const content = document.createElement("div");
  content.className = "product-content";
 
  // Title
  const title = document.createElement("h3");
  title.className = "product-title";
  title.textContent = product.name;
 
  // Description
  const desc = document.createElement("p");
  desc.className = "product-desc";
  desc.textContent = product.description;
 
  // Price
  const price = document.createElement("span");
  price.className = "product-price";
  price.textContent = `$${product.price.toFixed(2)}`;
 
  // Button
  const button = document.createElement("button");
  button.className = "btn btn-primary";
  button.textContent = "Add to Cart";
  button.addEventListener("click", () => addToCart(product.id));
 
  // Assemble the structure
  content.appendChild(title);
  content.appendChild(desc);
  content.appendChild(price);
  content.appendChild(button);
 
  card.appendChild(img);
  card.appendChild(content);
 
  return card;
}
 
// Usage
const product = {
  id: 1,
  name: "Wireless Headphones",
  description: "Noise-canceling over-ear headphones with 30-hour battery life.",
  price: 79.99,
  imageUrl: "/images/headphones.jpg"
};
 
document.getElementById("products").appendChild(createProductCard(product));

Using DocumentFragment for Batch Creation

When adding many elements to the DOM, each appendChild triggers a browser reflow. A DocumentFragment lets you build all elements in memory and add them in a single operation.

javascript

// SLOW: Each appendChild triggers a reflow
function renderListSlow(items) {
  const list = document.getElementById("item-list");
 
  items.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item.name;
    list.appendChild(li); // Reflow on every iteration!
  });
}
 
// FAST: DocumentFragment batches all additions
function renderListFast(items) {
  const list = document.getElementById("item-list");
  const fragment = document.createDocumentFragment();
 
  items.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item.name;
    fragment.appendChild(li); // No reflow (fragment is in memory)
  });
 
  list.appendChild(fragment); // Single reflow for all items
}

Performance Comparison

javascript

const items = Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` }));
 
// Approach 1: Direct appendChild
console.time("direct");
items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item.name;
  document.getElementById("list1").appendChild(li);
});
console.timeEnd("direct"); // ~50ms
 
// Approach 2: DocumentFragment
console.time("fragment");
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item.name;
  fragment.appendChild(li);
});
document.getElementById("list2").appendChild(fragment);
console.timeEnd("fragment"); // ~8ms
 
// Approach 3: innerHTML (string building)
console.time("innerHTML");
const html = items.map(item => `<li>${escapeHtml(item.name)}</li>`).join("");
document.getElementById("list3").innerHTML = html;
console.timeEnd("innerHTML"); // ~5ms (fastest, but no event listeners)

Approach	1,000 items	Event Listeners	XSS Safe
Direct appendChild	~50ms	Yes (attach before/after)	Yes
DocumentFragment	~8ms	Yes (attach before appending)	Yes
innerHTML (string)	~5ms	No (must re-attach)	Only if escaped

Creating Elements with innerHTML vs createElement

Both approaches work, but they have different trade-offs:

javascript

// innerHTML: faster for complex static HTML
container.innerHTML = `
  <div class="card">
    <h3>Title</h3>
    <p>Description here</p>
    <button>Click Me</button>
  </div>
`;
// Must attach event listeners AFTER setting innerHTML
container.querySelector("button").addEventListener("click", handler);
 
// createElement: safer, keeps event listeners
const card = document.createElement("div");
card.className = "card";
 
const title = document.createElement("h3");
title.textContent = "Title";
 
const desc = document.createElement("p");
desc.textContent = "Description here";
 
const btn = document.createElement("button");
btn.textContent = "Click Me";
btn.addEventListener("click", handler); // Listener attached inline
 
card.appendChild(title);
card.appendChild(desc);
card.appendChild(btn);
container.appendChild(card);

Criteria	innerHTML	createElement
Code readability	More readable for complex HTML	Verbose for nested structures
Performance (initial render)	Faster (native parser)	Slower (many API calls)
Event listeners	Destroyed, must re-attach	Preserved, attach inline
XSS safety	Dangerous with user input	Safe (textContent escapes)
Incremental updates	Replaces everything	Add/modify individual nodes

The Template Element

HTML <template> elements define reusable markup that you can clone:

html

<template id="task-template">
  <li class="task-item">
    <input type="checkbox" class="task-check">
    <span class="task-text"></span>
    <button class="task-delete">Delete</button>
  </li>
</template>

javascript

function addTask(taskText) {
  const template = document.getElementById("task-template");
  const clone = template.content.cloneNode(true); // deep clone
 
  // Fill in the data
  clone.querySelector(".task-text").textContent = taskText;
 
  // Attach event listeners
  clone.querySelector(".task-check").addEventListener("change", (e) => {
    e.target.closest(".task-item").classList.toggle("completed", e.target.checked);
  });
 
  clone.querySelector(".task-delete").addEventListener("click", (e) => {
    e.target.closest(".task-item").remove();
  });
 
  document.getElementById("task-list").appendChild(clone);
}
 
addTask("Buy groceries");
addTask("Write JavaScript tutorial");
addTask("Review pull request");

Element Creation Helper Function

Simplify element creation with a utility function:

javascript

function createElement(tag, props = {}, children = []) {
  const element = document.createElement(tag);
 
  // Set properties and attributes
  Object.entries(props).forEach(([key, value]) => {
    if (key === "className") {
      element.className = value;
    } else if (key === "style" && typeof value === "object") {
      Object.assign(element.style, value);
    } else if (key.startsWith("on")) {
      const event = key.slice(2).toLowerCase();
      element.addEventListener(event, value);
    } else if (key === "dataset") {
      Object.entries(value).forEach(([k, v]) => {
        element.dataset[k] = v;
      });
    } else {
      element.setAttribute(key, value);
    }
  });
 
  // Append children
  children.forEach(child => {
    if (typeof child === "string") {
      element.appendChild(document.createTextNode(child));
    } else if (child instanceof Node) {
      element.appendChild(child);
    }
  });
 
  return element;
}
 
// Usage: much cleaner than raw createElement calls
const card = createElement("div", { className: "card" }, [
  createElement("h3", { className: "card-title" }, ["Product Name"]),
  createElement("p", { className: "card-desc" }, ["A great product."]),
  createElement("button", {
    className: "btn btn-primary",
    onClick: () => console.log("Added to cart!")
  }, ["Add to Cart"])
]);
 
document.getElementById("products").appendChild(card);

Common Mistakes to Avoid

Mistake 1: Forgetting to Append the Element

javascript

// WRONG: Creates the element but never adds it to the page
const message = document.createElement("p");
message.textContent = "Hello!";
// ...where does it go? It exists in memory but is invisible
 
// CORRECT: Append to a parent element
const message2 = document.createElement("p");
message2.textContent = "Hello!";
document.getElementById("container").appendChild(message2);

Mistake 2: Using innerHTML When Children Have Events

javascript

// WRONG: innerHTML destroys existing children and their event listeners
container.innerHTML += '<div class="new-item">New</div>';
 
// CORRECT: Use appendChild to preserve existing content
const newItem = document.createElement("div");
newItem.className = "new-item";
newItem.textContent = "New";
container.appendChild(newItem);

Mistake 3: Creating Elements Inside a Loop Without Fragment

javascript

// SLOW: 1000 reflows
for (let i = 0; i < 1000; i++) {
  const div = document.createElement("div");
  div.textContent = `Item ${i}`;
  container.appendChild(div); // Reflow each time!
}
 
// FAST: 1 reflow
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement("div");
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
container.appendChild(fragment);

Real-World Example: Dynamic Comment System

javascript

function createCommentSystem(containerId) {
  const container = document.getElementById(containerId);
  const form = container.querySelector(".comment-form");
  const list = container.querySelector(".comment-list");
  const countEl = container.querySelector(".comment-count");
  let commentCount = 0;
 
  function createComment(author, text, timestamp) {
    const comment = document.createElement("div");
    comment.className = "comment";
 
    const header = document.createElement("div");
    header.className = "comment-header";
 
    const avatar = document.createElement("div");
    avatar.className = "comment-avatar";
    avatar.textContent = author.charAt(0).toUpperCase();
 
    const authorEl = document.createElement("strong");
    authorEl.className = "comment-author";
    authorEl.textContent = author;
 
    const time = document.createElement("time");
    time.className = "comment-time";
    time.textContent = new Date(timestamp).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric"
    });
 
    header.appendChild(avatar);
    header.appendChild(authorEl);
    header.appendChild(time);
 
    const body = document.createElement("p");
    body.className = "comment-body";
    body.textContent = text; // Safe: textContent escapes HTML
 
    const actions = document.createElement("div");
    actions.className = "comment-actions";
 
    const likeBtn = document.createElement("button");
    likeBtn.className = "comment-action";
    likeBtn.textContent = "Like (0)";
    let likes = 0;
    likeBtn.addEventListener("click", () => {
      likes++;
      likeBtn.textContent = `Like (${likes})`;
      likeBtn.classList.add("liked");
    });
 
    const replyBtn = document.createElement("button");
    replyBtn.className = "comment-action";
    replyBtn.textContent = "Reply";
    replyBtn.addEventListener("click", () => {
      const replyInput = document.createElement("input");
      replyInput.type = "text";
      replyInput.className = "reply-input";
      replyInput.placeholder = "Write a reply...";
      replyInput.addEventListener("keydown", (e) => {
        if (e.key === "Enter" && replyInput.value.trim()) {
          const reply = createComment("You", replyInput.value, Date.now());
          reply.classList.add("comment-reply");
          comment.appendChild(reply);
          replyInput.remove();
        }
      });
      comment.appendChild(replyInput);
      replyInput.focus();
    });
 
    actions.appendChild(likeBtn);
    actions.appendChild(replyBtn);
 
    comment.appendChild(header);
    comment.appendChild(body);
    comment.appendChild(actions);
 
    return comment;
  }
 
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const nameInput = form.querySelector('[name="author"]');
    const textInput = form.querySelector('[name="comment"]');
 
    if (nameInput.value.trim() && textInput.value.trim()) {
      const comment = createComment(
        nameInput.value.trim(),
        textInput.value.trim(),
        Date.now()
      );
 
      list.prepend(comment);
      commentCount++;
      countEl.textContent = `${commentCount} comment${commentCount !== 1 ? "s" : ""}`;
 
      textInput.value = "";
      textInput.focus();
    }
  });
}
 
createCommentSystem("comments-section");

Rune AI

Key Insights

createElement creates in memory: Elements are not visible until you appendChild them to a DOM node
textContent for safety: Always use textContent to set user-provided text on created elements, never innerHTML
DocumentFragment for performance: Batch-create elements inside a fragment to trigger only one browser reflow instead of one per element
Template elements for reuse: Use HTML <template> tags to define reusable structures that you clone with cloneNode(true)
Event listeners survive: Unlike innerHTML, elements created with createElement keep their event listeners when the parent DOM changes

Frequently Asked Questions

What is the difference between createElement and innerHTML?

The `createElement` method creates a single DOM node programmatically and is safe from XSS because you set text with `textContent`. The `innerHTML` property parses an HTML string and creates multiple nodes at once, which is faster for large static HTML but dangerous with user input. Use `createElement` when you need event listeners or handle user data; use `innerHTML` for trusted, static HTML templates.

Does createElement add the element to the page automatically?

No. The `createElement` method creates the element in memory but does not attach it to the DOM. You must explicitly add it to the page using methods like `appendChild`, `prepend`, `insertBefore`, or `append`. Until you attach it, the element is invisible and exists only in JavaScript memory.

When should I use DocumentFragment?

Use `DocumentFragment` when you need to add multiple elements to the DOM in a single operation. Building elements inside a fragment avoids triggering a browser reflow for each addition. This matters when adding 50 or more elements, such as rendering a list from API data, building a table, or creating multiple notification items.

Can I clone an existing element instead of creating from scratch?

Yes. Use `element.cloneNode(true)` to create a deep copy of an element including all its children and attributes. This is useful when you have a template element on the page that you want to duplicate. Note that cloned elements do not inherit event listeners from the original; you must re-attach them.

How do I create an element and add it at a specific position?

Use `parentElement.insertBefore(newElement, referenceElement)` to insert before a specific child. Use `element.insertAdjacentElement("position", newElement)` with positions: `beforebegin`, `afterbegin`, `beforeend`, or `afterend`. Modern browsers also support `element.before()`, `element.after()`, and `element.prepend()` for cleaner syntax.

Conclusion

Creating HTML elements with JavaScript is a fundamental skill for building dynamic web applications. The createElement method gives you full control over each element's attributes, content, and event listeners. Use DocumentFragment to batch multiple elements and minimize browser reflows. Use the <template> element for reusable HTML structures that you clone and fill with data. For complex component trees, build a helper function that simplifies the verbose createElement calls. The key principle is to prefer programmatic element creation over innerHTML whenever you handle user input or need to preserve existing event listeners.

Stay Updated

Stay Updated

Stay Updated

Stay Updated

Stay Updated

Creating HTML Elements with JavaScript DOM Guide

Creating Elements with document.createElement()

Setting Content and Attributes

Comparison: Property vs setAttribute

Creating Text Nodes

When to Use createTextNode vs textContent

Building Nested Element Structures

Using DocumentFragment for Batch Creation

Performance Comparison

Creating Elements with innerHTML vs createElement

The Template Element

Element Creation Helper Function

Common Mistakes to Avoid

Mistake 1: Forgetting to Append the Element

Mistake 2: Using innerHTML When Children Have Events

Mistake 3: Creating Elements Inside a Loop Without Fragment

Real-World Example: Dynamic Comment System

Rune AI

Frequently Asked Questions

What is the difference between createElement and innerHTML?

Does createElement add the element to the page automatically?

When should I use DocumentFragment?

Can I clone an existing element instead of creating from scratch?

How do I create an element and add it at a specific position?

Conclusion

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation

Stay Updated