【JavaScript】新規に要素を作成する【createElement】

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptのcreateElementで新規に要素を作成する方法をご紹介しています。

新しい要素を作成してある要素の中に追加したいんだけど、良い方法ないかな？

上記の疑問にお答えしています。

では、解説していきます。

新規に要素を作成する方法

JavaScriptで要素を作成する方法にcreateElement()メソッドがあります。createElement()メソッドは、引数にタグの名前を指定することで新規要素を作成することができる便利なメソッドです。もし引数に指定したタグが存在しない場合は「HTMLUnknownElement」を返してくれるので安心して使用することができます。

createElementの使い方

createElement()メソッドは引数にタグ名を指定することで新規要素を作成することができます。

例えば「p要素」を作成する場合は下記のように記述します。

document.createElement("p");

これだけで新規要素を作成することができます。

createElement()メソッドの使い方がわかったところで、実際に要素を作成してみましょう！

createElement()メソッドで要素を作成する

前項と同様にcreateElement()メソッドで「p要素」を作成してみます。

const el = document.createElement("p");

上記で作成した「el」をコンソールで確認すると下記のように要素が作成されていることがご確認いただけます。

"<p></p>"

これで要素を作成することができました。しかし作成した真っ新な要素をそのまま使用する状況はあまりないですよね。なので作成した「p要素」にテキストや属性を追加してみましょう。

作成した要素にテキストを追加する

テキストの追加には「textContent」を使用します。例にならって「Hello World!」というテキストを要素に追加してみます。

const el = document.createElement("p");

el.textContent = "Hello World!";

上記をコンソールで出力すると下記のような結果に。

"<p>Hello World!</p>"

指定したテキストがcreateElement()メソッドで作成した「p要素」に追加されています。

作成した要素に属性を追加する

作成した要素に属性を追加してみます。属性の追加には「setAttribute()」メソッドを使用します。下記のページで使い方を詳しくご紹介していますので、あわせて読んでいただければと思います。

では、要素の作成から属性の追加まで実際に書いてみましょう。例では「id」属性に「paragraph」という値を持たせてみます。

const el = document.createElement("p");

el.setAttribute("id", "paragraph");

上記をコンソールで出力すると下記のような結果に。

"<p id='paragraph'></p>"

ちゃんと「id」属性が追加できているかと思います。これで要素の作成は一通りできるようになりましたね！

最後に作成した要素を特定の要素に追加（ブラウザに表示）して終わりたいと思います。

作成した要素を特定の要素に追加する

本記事でご紹介した内容を一通りやってみましょう。要素を作成してテキストと属性を追加し、「body」に作成した要素を追加してみます。要素の追加にはappendChild()メソッドを使用します。各行が何をしているかはコメントをご確認いただければと思います。

//「p要素」を作成する

const el = document.createElement("p");

//属性を追加する

el.setAttribute("id", "paragraph");

//テキストを追加する

el.textContent = "Hello World!";

//要素を「body」に追加する

document.body.appendChild(el);

実行すると下記のように作成した要素が「body」要素に追加されてブラウザ上に表示されます。