要素の挿入（append / appendChild）の基本 — parent.append(child)
「作った要素を画面に出す」最後の一手が挿入です。DOMの親要素に子をぶら下げることで、はじめて表示されます。appendChild は古くからある定番、append は新しめで使い勝手がよいメソッドです。
使い分けの要点
- appendChild(childNode): 子ノードを「1つだけ」末尾に追加。引数はノード（要素・テキストノードなど）で、DOMString（ただの文字列）は不可。
- append(…nodesOrStrings): 複数の引数を渡せる。ノードも文字列もOK。文字列は自動でテキストノードとして追加される。末尾に追加する点は同じ。
- 位置: どちらも「親要素の末尾」に追加される。特定位置に入れたいときは
insertBeforeを使う。
例:
parent.append(child, "文字列", anotherChild)のように一度に複数追加できるのがappendの強みです。
基本のコード例
<div id="list"></div>
<script>
const parent = document.getElementById("list");
// 要素を作成
const item = document.createElement("div");
item.textContent = "1行目";
// 1) appendChild：1つだけ、ノード必須
parent.appendChild(item);
// 2) append：複数、文字列もOK
parent.append(
document.createElement("hr"),
"テキスト行",
(() => {
const x = document.createElement("div");
x.textContent = "2行目";
return x;
})()
);
</script>
appendChildは1つだけ、ノード型のみ。appendは複数・文字列可能で柔軟です。
よく使うテンプレート集
複数アイテムを一気に挿入（append）
const ul = document.querySelector("#items");
ul.append(
(() => { const li = document.createElement("li"); li.textContent = "A"; return li; })(),
(() => { const li = document.createElement("li"); li.textContent = "B"; return li; })(),
"最後にテキストも追加"
);
- 一度に複数・文字列も追加でき、コードが簡潔になります。
DocumentFragmentで高速挿入（大量要素）
const frag = document.createDocumentFragment();
for (let i = 1; i <= 100; i++) {
const li = document.createElement("li");
li.textContent = `Item ${i}`;
frag.appendChild(li);
}
document.querySelector("#list").appendChild(frag);
- まとめて作って最後に一括挿入すると reflow を抑えられ、パフォーマンスが向上します。
既存要素の手前に挿入（insertBefore）
const ref = document.querySelector(".ref");
const badge = document.createElement("span");
badge.textContent = "NEW";
ref.parentNode.insertBefore(badge, ref); // refの直前に挿入
- 末尾ではなく「この要素の前」に入れたいときは
insertBeforeを使います。
実務でのコツ
- テキストは textContent で安全に: ユーザー入力などは
innerHTMLでなくtextContentを使う。appendの文字列もテキストとして挿入されるので安全側に寄ります。 - コンポーネント化: 「作る→中身設定→イベント付与→親へ挿入」の流れを関数にして再利用。
- 大量挿入は Fragment: ループごとに挿入せず、Fragmentに溜めてから一括挿入。
- 位置制御: 末尾以外は
insertBefore、兄弟間移動はinsertBefore(ノード, 参照の次兄弟)などで柔軟に。
ありがちなハマりポイントと対策
- appendChild に文字列を渡してしまう: 例外になる。文字列を入れたいなら
append("text")を使うか、document.createTextNode("text")を作って渡す。 - 作ったのに表示されない: 親に挿入していない。最後に必ず
append/appendChildなどで既存DOMへぶら下げる。 - 位置の誤解: 末尾にしか入らない。特定位置は
insertBeforeを使う。
練習問題（手を動かして覚える）
<ul id="list"></ul>
<script>
const list = document.getElementById("list");
// 1) appendChildで1つずつ
const a = document.createElement("li");
a.textContent = "A";
list.appendChild(a);
// 2) appendで複数まとめて＋文字列
const b = document.createElement("li"); b.textContent = "B";
const c = document.createElement("li"); c.textContent = "C";
list.append(b, c, "（テキストも追加）");
// 3) 2番目の前にNEWを挿入
const newBadge = document.createElement("li");
newBadge.textContent = "NEW";
list.insertBefore(newBadge, list.children[1]);
</script>
直感的な指針
- 末尾に1つだけ追加なら appendChild、複数や文字列も一度に追加したいなら append。
- 大量追加は DocumentFragment → 最後に一括。
- 位置を細かく指定したいときは insertBefore。