document.createElement()

var element = document.createElement("タグ名");

新しく作成されたHTML要素（Elementオブジェクト）を返します。この時点ではDOMに追加されていません。

sample_createElement.html

<ul id="list">
	<li>既存の項目</li>
</ul>
<div id="fighters"></div>
<table id="roster">
	<thead><tr><th>名前</th><th>流派</th></tr></thead>
	<tbody id="roster-body"></tbody>
</table>

sample_createElement.js

// パターン1: 基本的な使い方
var newItem = document.createElement("li");
newItem.textContent = "新しい項目";
var list = document.getElementById("list");
list.appendChild(newItem);

// パターン2: 属性・クラスを設定してからDOMに追加する
var fighters = document.getElementById("fighters");
var names = ["八神庵", "草薙京", "テリー・ボガード"];
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);
});

// パターン3: 入れ子のHTML要素を組み立ててから追加する
var tbody = document.getElementById("roster-body");
var roster = [
	{ name: "八神庵",      style: "八神流古武術" },
	{ name: "草薙京",      style: "草薙流古武術" },
	{ name: "テリー・ボガード", style: "サウスタウン" },
	{ name: "ブルー・マリー",  style: "フリーエージェント" }
];
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); // 完成したtr要素をtbodyに追加します。
});

サンプルページはこちら

『document.createElement()』は新しいHTML要素を作成するメソッドです。作成されたHTML要素はメモリ上に存在するだけで、まだページには表示されていません。ページに表示するには、『親HTML要素.appendChild()』などのメソッドで既存のHTML要素の子要素として追加する必要があります。

HTML要素を追加する前に、『HTML要素.textContent』でテキストを設定したり、『HTML要素.setAttribute()』で属性を設定したり、『HTML要素.classList』でクラスを追加したりと、自由にカスタマイズしてからDOMに追加することが可能です。