Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

JavaScript辞典

トップページ
JavaScript辞典
document.createElement()

document.createElement() 対応: DOM Level 1（1998）

指定したタグ名の新しいHTML要素を作成します。作成したHTML要素はまだDOMに追加されていない状態のため、別途追加処理が必要です。

構文

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

引数

引数	概要
タグ名	作成するHTML要素のタグ名を文字列で指定します。大文字・小文字は区別されません。

戻り値

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

サンプルコード

<ul id="list">
	<li>既存の項目</li>
</ul>

// 新しいli要素を作成します。
var newItem = document.createElement("li");
newItem.textContent = "新しい項目";

// リストに追加します。
var list = document.querySelector("#list");
list.appendChild(newItem);

// 属性やクラスを設定してから追加することもできます。
var link = document.createElement("a");
link.setAttribute("href", "https://example.com");
link.classList.add("external-link");
link.textContent = "外部リンク";
document.body.appendChild(link);

概要

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

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