【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」要素に追加されてブラウザ上に表示されます。

DEMO

See the Pen
createElement | JavaScript
by ryohei (@intotheprogram)
on CodePen.

テキストと属性が追加されていることをご確認ください。

最後に

スクリプト側から新規に要素を作成するcreateElement()メソッドは、サイト制作はもちろんWebアプリケーションにも使える便利なメソッドです。直感的で使いやすいメソッドですので、何度か使用して覚えてみてくださいね!

以上、JavaScriptで新規に要素を作成するcreateElement()メソッドのご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍