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

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.