JavaScript

【初心者向け】JavaScriptでHTML要素を作成・追加する3つの方法

一般的にWEBサイトの画面を制作する場合、HTMLファイルにタグを記述し、それをWEBブラウザに読み込ませる必要があります。

しかし、近年ではわざわざHTMLタグを記述せずとも、JavaScriptでHTMLの要素（DOM）を作成し、WEBページに表示させることが可能です。

今回は、JavaScriptを用いてHTML要素を作成・追加する方法を3つ、初心者向けにわかりやすく解説していきます。

使用するサンプルコード

今回HTMLを追加するために利用する、HTML/CSSのサンプルコードです。勉強中の方はお使いください。

<div class="box">
    <p id="target">ここに要素を追加</p>
</div>

<button type="button" onclick="clicked()">実行</button>

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box{
    padding: 20px;
    background: #43C9FA;
    text-align: center;
}

/* .box要素の中に追加する要素 */
.inner-box{
    width: 300px;
    height: 100px;
    background: #fa6843;
}

#target{
    font-size: 25px;
}

// イベント時のコールバック関数
function clicked(){
    //ここに実行したい処理を書く
}

/*
    処理を見やすくするため、
    関数clickからコードを実行していますが、
    別にscriptから即座に実行させてもOKです。
*/

上記のコードを記入した結果、以下のような画面が中央に表示されていれば準備完了です。

#targetの中身に対して、テキストを上書きしつつ新しいDOM要素を生成・追加するのが、今回の目的になります。

1．createElement( )

createElement()は、Documentオブジェクトで定義されているHTML要素を生成するための関数です。

要素をオブジェクトとして生成するための関数で、DOMのデータ自体を戻り値として返す、JavaScriptの定番関数だと言えます。

createElement( )を使ってDOM要素を追加したのが以下のコードです。

// イベント時のコールバック関数
function clicked(){
    // div要素を生成し、elemにデータを代入
    let elem = document.createElement("div");

    // elemが持つDOMデータに対し、class=”inner-box”を付与
    elem.classList.add("inner-box");

    // elemを#target要素に追加
    let target = document.getElementById("target");

    //appendChild(DOM要素)で、要素を追加できる
    target.appendChild(elem);
}

画面上に、オレンジ色のブロック（.inner-box）が出現しましたね。

開発者ツールからコードを確認しても、
#targetの中に要素が追加されているのがわかります。

ちなみに、変数に保持されているデータに対し、要素を追加することも可能です。

let elem = document.createElement("div");

// 中にDOM要素を追加する
let p = document.createElement("p");
elem.appendChild(p);
//今回はp要素をelemに追加

/*・・・*/

2．insertAdjacentHTML( )

insertAdjacentHTML()は、文字列を用いてHTML要素を対象となる要素内あるいはその前後に追加する関数です。基本的には、以下のような形式で使用します。

// 対象の要素.insertAdjacentHTML(位置指定, HTMLの文字列);
target.insertAdjacentHTML("afterbegin", "<>")

「位置指定」と書いてある場所には、用意されているコマンドを文字列として記述することで、第2引数のHTML要素を対象要素のどこに入れるかを決めることができます。

コマンドとしては、

• beforebegin
• afterbegin
• beforeend
• afterend

の4種類が存在しており、どれを指定するかによって処理の内容が異なります。では、それぞれどのような処理になるのか、細かく見ていきましょう。

beforebegin / afterend

beforebeginは、対象の要素の直前にHTML要素を追加するコマンドです。

// 今回は.boxの直前に追加する
let target = document.querySelector(".box");

// inner-boxクラスを持ったdiv要素を追加
target.insertAdjacentHTML("beforebegin", "<div class='inner-box'></div>");

.box要素が青いブロックなので、その上部、つまり対象の要素の直前に、.inner-boxを追加できています。

一方でafterendは、対象の要素の直後にHTML要素を追加するコマンドです。

let target = document.querySelector(".box");

// inner-boxクラスを持ったdiv要素を追加
target.insertAdjacentHTML("afterend", "<div class='inner-box'></div>");

前述の実行結果とは対称的に、青いブロックの下、対象の要素の直後に追加されています。

afterbegin / beforeend

afterbeginは、対象の要素の中身の先頭に要素を追加するコマンドです。

少しややこしい書き方ですが、実行結果を見ればよくわかるかもしれません。

// 今回は#targetの中に追加する
let target = document.querySelector("#target");

// inner-boxクラスを持ったdiv要素を追加
target.insertAdjacentHTML("afterbegin", "<div class='inner-box'></div>");

この場合、#targetの中身には「ここに要素を追加」が入っていますが、afterbeginはそれらの要素の先頭にHTML要素を挿入するため、「ここに要素を追加」という文字列の上に.inner-boxが追加されます。

一方でbeforeendは、対象の要素の中身の最後に要素を追加するコマンドです。

let target = document.querySelector("#target");

// inner-boxクラスを持ったdiv要素を追加
target.insertAdjacentHTML("beforeend", "<div class='inner-box'></div>");

afterbeginとは対照的に、「ここに要素を追加」などの要素の最後尾に追加されています。

3．innerHTML

innerHTMLは、対象の要素の中身（HTML）を保持するデータです。

これまでのものは関数を扱っていましたが、innerHTMLは対象の要素のHTMLを文字列として記憶しているものであり、代わりとなる文字列（HTML要素）を代入すると、無理やり要素の中身を変更できます。ただし、かなり強引な手法なので、変な扱い方をすると、HTMLの構造を大幅に乱してしまう恐れがあります。

// 今回は.boxの中に追加する
let target = document.querySelector(".box");

// inner-boxクラスを持ったdiv要素を追加
target.innerHTML = "<div class='inner-box'></div>";

実行すると、「ここに要素を追加」というテキストが消え、.inner-boxが要素いっぱいに表示されました。本来.boxには文字列の入った要素#targetがありましたが、それごと上書きしてしまっているというわけです。

比較的簡単に実装できる処理ですが、トラブルの原因になりやすかったり、処理が少し重かったりするので、現在ではあまり推奨されていない方法です。

まとめ

JavaScriptを用いてHTML要素を追加する方法はさまざまですが、一番おすすめなのはcreateElement()を用いてDOMを生成し、その後各種関数を用いてHTML内に追加していく方法です。もちろん、場面によって優先すべき処理は変わってくるので、お好みの方法で、かっこよく要素を追加していきましょう。