Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
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);
実行結果
上記のコードを実行すると、HTMLは以下のように変化します。
<!-- 実行前 --> <ul id="list"> <li>既存の項目</li> </ul>
<!-- 実行後 --> <ul id="list"> <li>既存の項目</li> <li>新しい項目</li> </ul>
『document.createElement()』で作成しただけでは画面に表示されません。『親HTML要素.appendChild()』で既存のHTML要素に追加して初めてページに反映されます。
概要
『document.createElement()』は新しいHTML要素を作成するメソッドです。作成されたHTML要素はメモリ上に存在するだけで、まだページには表示されていません。ページに表示するには、『親HTML要素.appendChild()』などのメソッドで既存のHTML要素の子要素として追加する必要があります。
HTML要素を追加する前に、『HTML要素.textContent』でテキストを設定したり、『HTML要素.setAttribute()』で属性を設定したり、『HTML要素.classList』でクラスを追加したりと、自由にカスタマイズしてからDOMに追加することが可能です。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする