Table of Contents

JavaScript createElement() is the DOM method used to build HTML elements with code. More precisely, document.createElement() creates a new element in memory; you can set its attributes, add text or child elements, and insert it into the document. This is the foundation for building interactive interfaces without replacing an entire page.

What does createElement() do?

createElement() belongs to the browser’s Document object. Calling it creates an element node, but does not place that node on the page. Until you attach it to an existing node, it is not visible in the document.

Syntax

const element = document.createElement(tagName);

tagName is the name of the HTML element, such as "div", "p", or "button". The method returns a new element. For ordinary HTML, use a lowercase tag name. For custom elements, use the registered name, which must include a hyphen.

Example 1: Create and append a paragraph

This complete example adds a message to the page when you click the button:

<button id="show-message" type="button">Show message</button>
<div id="output"></div>

<script>
  const paragraph = document.createElement("p");
  paragraph.textContent = "This paragraph was created with JavaScript.";

  document.querySelector("#show-message").addEventListener("click", () => {
    document.querySelector("#output").append(paragraph);
  });
</script>

The paragraph exists after the first two lines, but it appears only after append() attaches it to the output container. If you need a fresh paragraph on every click, create it inside the event handler.

Example 2: Build a list from data

Creating elements in a loop is useful when rendering search results, menus, or items returned by an API:

<ul id="topics"></ul>
<script>
  const topics = ["Elements", "Attributes", "Events"];
  const list = document.querySelector("#topics");

  for (const topic of topics) {
    const item = document.createElement("li");
    item.textContent = topic;
    list.append(item);
  }
</script>

Each iteration makes a separate <li> node and appends it to the list. The order of the array becomes the order of the rendered items.

Set attributes, classes, and styles

Use properties for common values, and methods such as setAttribute() when you need to set a specific HTML attribute:

const link = document.createElement("a");
link.href = "https://example.com";
link.textContent = "Visit Example";
link.classList.add("resource-link");
link.setAttribute("aria-label", "Visit the Example website");

document.querySelector("#resources").append(link);

Prefer classList.add() for CSS classes and element.style only for small, dynamic style changes. Keeping presentation in a stylesheet makes the interface easier to maintain.

Put several new elements on the page efficiently

For a larger batch, a DocumentFragment lets you assemble nodes before attaching them:

const fragment = document.createDocumentFragment();

for (const name of ["Ada", "Grace", "Linus"]) {
  const item = document.createElement("li");
  item.textContent = name;
  fragment.append(item);
}

document.querySelector("#people").append(fragment);

Appending the fragment moves its children into the list. The fragment itself is not added as a visible element.

Common mistakes

  • Forgetting to append: creation alone does not display the element. Add it with append(), appendChild(), prepend(), or another insertion method.
  • Using innerHTML for untrusted text: inserting user-provided strings as HTML can create cross-site scripting risks. Use textContent for plain text.
  • Appending the same node twice: a DOM node can have only one parent. Appending it elsewhere moves it; it does not make a copy. Use cloneNode(true) when you need a duplicate with descendants.
  • Using the wrong tag name: pass a tag name such as "section", not markup such as "<section>".
  • Setting a property that does not apply: for nonstandard or data attributes, use setAttribute() or dataset, for example item.dataset.id = "42".

Categorized in:

Javascript, Js DOM,