document.createElement()

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

Returns the newly created HTML element (an Element object). At this point, it has not been added to the DOM.

sample_createElement.html

<ul id="list">
	<li>Existing item</li>
</ul>
<div id="fighters"></div>
<table id="roster">
	<thead><tr><th>Name</th><th>Style</th></tr></thead>
	<tbody id="roster-body"></tbody>
</table>

sample_createElement.js

// Pattern 1: Basic usage
var newItem = document.createElement("li");
newItem.textContent = "New item";
var list = document.getElementById("list");
list.appendChild(newItem);

// Pattern 2: Set attributes and classes before appending to the DOM
var fighters = document.getElementById("fighters");
var names = ["Yagami Iori", "Kusanagi Kyo", "Terry Bogard"];
names.forEach(function(name) {
	var btn = document.createElement("button");
	btn.type = "button";
	btn.className = "fighter-btn";
	btn.setAttribute("data-name", name);
	btn.textContent = name;
	fighters.appendChild(btn);
});

// Pattern 3: Build nested elements and append them in one shot
var tbody = document.getElementById("roster-body");
var roster = [
	{ name: "Yagami Iori", style: "Yagami-ryu Old Fighting Style" },
	{ name: "Kusanagi Kyo", style: "Kusanagi-ryu Old Fighting Style" },
	{ name: "Terry Bogard", style: "Southtown" },
	{ name: "Blue Mary", style: "Freelance Agent" }
];
roster.forEach(function(fighter) {
	var tr = document.createElement("tr");

	var tdName = document.createElement("td");
	tdName.textContent = fighter.name;
	tr.appendChild(tdName);

	var tdStyle = document.createElement("td");
	tdStyle.textContent = fighter.style;
	tr.appendChild(tdStyle);

	tbody.appendChild(tr); // Append the finished tr element to tbody
});

View sample page

Mistake 1: Forgetting to add the created element to the DOM

An element created with document.createElement() exists only in memory and is not displayed on the page. You must add it to an existing element using appendChild() or insertBefore() for it to appear.

var li = document.createElement("li");
li.textContent = "Yagami Iori";
// NG: not added to the DOM — nothing appears on screen

The following example shows how this works in practice:

var li = document.createElement("li");
li.textContent = "Yagami Iori";
var list = document.getElementById("list");
list.appendChild(li); // OK: adding to the DOM makes it visible

Mistake 2: Using innerHTML to create elements (XSS risk)

Assigning a string to innerHTML is convenient but carries an XSS risk if the string contains user input. When generating elements dynamically, using createElement() with textContent and setAttribute() is safer.

var userInput = "<img src=x onerror=alert('XSS')>";
var container = document.getElementById("output");
container.innerHTML = userInput; // NG: XSS can occur

This produces the following output:

var userInput = "<img src=x onerror=alert('XSS')>";
var container = document.getElementById("output");
var p = document.createElement("p");
p.textContent = userInput; // OK: HTML tags are treated as plain text — no XSS
container.appendChild(p);

document.createElement() is a method that creates a new HTML element. The created element exists only in memory and is not yet displayed on the page. To display it on the page, you need to add it as a child of an existing element using a method such as parentElement.appendChild().

Before adding an element to the DOM, you can freely customize it — for example, set its text with element.textContent, set attributes with element.setAttribute(), or add CSS classes with element.classList.