この記事は K3 Advent Calendar 2025 23 日目の記事です。
DOM に JavaScript から要素を追加する方法 は数多くあります。あなたならどうしますか？
前提
以下の DOM を操作することを想定します。
<h1>リスト</h1>
<div id="parent">
<button class="item">アイテム1</button>
<!-- ここに「アイテム2」を追加 -->
</div>
いろんな方法
innerHTML
定番の技です。内側の HTML を操作します。
const parent = document.getElementById("parent");
parent.innerHTML += `<button class="item">アイテム2</button>`;
やることは HTML の文字列を操作するだけです。parent.innerHTML は以下のようになります。
<button class="item">アイテム1</button>
<!-- ここに「アイテム2」を追加 -->
<button class="item">アイテム2</button>
最終的に中身は以下のようになります。
<h1>リスト</h1>
<div id="parent">
<button class="item">アイテム1</button>
<!-- ここに「アイテム2」を追加 -->
<button class="item">アイテム2</button>
</div>
innerHTML では、一度 innerHTML の値に文字列を足し、それをまた innerHTML に代入しています。ですが、これだとすでに JavaScript で取得していた「アイテム1」の要素が、DOM からなくなってしまいます。
// 以前に取得していたボタンの要素
const button1 = document.getElementsByClassName("item")[0];
// クリックイベントを登録
button1.addEventListener("click", event => {
console.log("はろー１１１１");
});
const parent = document.getElementById("parent");
// innerHTML に追加すると、クリックイベントが機能しなくなる。
parent.innerHTML += `<button class="item">アイテム2</button>`;
insertAdjacentHTML
これは innerHTML とは違い、HTML を代入ではなく「追加」します。これにより、先述した innerHTML の問題を解決します。
const parent = document.getElementById("parent");
parent.insertAdjacentHTML("beforeend", `<div class="item">アイテム2</div>`);
パフォーマンスもこちらの方が有利なので、積極的に使っていきましょう。
append, appendChild
前の 2 つでは HTML 形式の文字列を使って要素を挿入していましたが、こちらでは直接ノードを追加していきます。ノードというのは、document.getElementById などを実行した結果得られるようなものです。
document.createElement でノードを作成し、parent に追加します。
const parent = document.getElementById("parent");
const button2 = document.createElement("button");
button2.classList.add("item"); // class を追加
button2.textContent = "アイテム2"; // 中身のテキストを追加
parent.appendChild(button2);
textContent を使うことで、HTML ではなくテキストとして挿入できます。< や & などといった、HTML では本来エスケープしなければならない文字もそのまま挿入できます。
appendChild() との違いは次の通りです。
- append() は文字列も追加することができますが、appendChild() はNode オブジェクトのみを受け付けます。
- append() には返値がありませんが、appendChild() は追加された Node オブジェクトを返します。
- append() は複数のノードや文字列を追加することができますが、appendChild() はノードを 1 つだけしか追加することができせん。
パフォーマンス
DOM の操作によって、スタイルの再計算が発生します。これがブラウザにとってかなりの負荷となります。操作回数はなるべく少なくなるようにしましょう。