JavaScript Creating Elements

Written by Swapnil RajaPublished 24 Aug 2026

createElement builds a new element that can then be added to the page.

A created element exists in memory but is invisible until you attach it.

This is the safe alternative to building pages out of innerHTML strings.

Example

javascript

document.body.innerHTML = '<div id="box"></div>';

const p = document.createElement("p");
p.textContent = "Made by JavaScript";
document.getElementById("box").append(p);

console.log(document.querySelectorAll("p").length);

PreviousJavaScript classList NextJavaScript Inserting Elements

Example

javascript

document.body.innerHTML = '<div id="box"></div>';

const button = document.createElement("button");
button.textContent = "Save";
button.className = "primary";
button.setAttribute("type", "button");

document.getElementById("box").append(button);

console.log(document.querySelector("button").className);

Example

javascript

document.body.innerHTML = '<ul id="list"></ul>';

const names = ["Ada", "Grace", "Alan"];
const list = document.getElementById("list");

names.forEach(function (name) {
  const li = document.createElement("li");
  li.textContent = name;
  list.append(li);
});

console.log(document.querySelectorAll("li").length);

Example

javascript

document.body.innerHTML = '<div id="box"></div>';

const li = document.createElement("li");
li.textContent = "<script>bad<" + "/script>";
document.getElementById("box").append(li);

console.log(document.querySelectorAll("script").length);

Example

javascript

document.body.innerHTML = '<div id="box"><p class="row">One</p></div>';

const original = document.querySelector(".row");
const copy = original.cloneNode(true);
document.getElementById("box").append(copy);

console.log(document.querySelectorAll(".row").length);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript createElement</title>
</head>
<body>

  <h1>Creating Elements</h1>

  <ul id="list"></ul>

  <script>
    const names = ["Ada", "Grace", "Alan"];
    const list = document.getElementById("list");

    names.forEach(function (name) {
      const item = document.createElement("li");
      item.textContent = name;
      list.append(item);
    });
  </script>

</body>
</html>

JavaScript Creating Elements

Example

Creating and Attaching

Syntax

Not Visible Until Attached

Example

Setting It Up First

Example

Building a List

Example

Creating Text Safely

Example

Cloning an Element

Example

Complete Example

Try It Yourself

Important Points

Conclusion