append とは何か
append は、親ノードの「末尾」にコンテンツを追加するためのメソッドです。ノード（要素やテキストノード）だけでなく、文字列も直接渡せるのが特徴です。ここが重要です：append は複数引数を一度に受け取れます。appendChild と違い、文字列をそのまま渡せ、戻り値はなく（undefined）、例外が少なく扱いやすい“モダンな末尾追加”手段です。
基本の使い方（ノード・文字列・複数の一括追加）
ノードを追加する
<div id="box"></div>
<script>
const box = document.getElementById("box");
const span = document.createElement("span");
span.textContent = "こんにちは";
box.append(span); // 末尾に <span> を追加
</script>
ここが重要です：append は Node を受け取ると、そのまま末尾に挿入します。既存ノードを渡した場合は“移動”になります（複製ではない）。
文字列を直接追加する
<div id="box"></div>
<script>
const box = document.getElementById("box");
box.append("文字を直接追加できます"); // テキストノードとして追加
</script>
ここが重要です：append に渡した文字列は“テキストノード”として安全に追加されます。HTMLタグは解釈されず、文字として扱われます。
複数の引数をまとめて追加する
<div id="box"></div>
<script>
const box = document.getElementById("box");
const strong = document.createElement("strong");
strong.textContent = "重要";
box.append("先頭文", strong, "末尾文"); // 一度で3つ追加
</script>
ここが重要です：append は複数を一度で渡せます。“テキスト＋要素＋テキスト”のような組み合わせも自然に書けます。
append と appendChild の違い（どちらを選ぶか）
文字列も追加でき、複数引数が使えるのが append
<div id="box"></div>
<script>
const box = document.getElementById("box");
box.append("テキスト"); // OK
// box.appendChild("テキスト"); // NG（エラー：Node しか受け取れない）
const a = document.createElement("a");
const b = document.createElement("b");
box.append(a, b); // OK（複数引数）
// appendChild は 1つの Node しか渡せない
</script>
ここが重要です：Node 専用・単体追加なら appendChild、文字列や複数をまとめたいなら append。読みやすさと柔軟性の面で、初心者は基本的に append を使うと楽です。
テキストの安全性（textContent と同じ“文字扱い”）
ユーザー入力は文字として追加する
<div id="messages"></div>
<script>
const messages = document.getElementById("messages");
const userInput = "<img onerror='alert(1)'>";
messages.append(userInput); // 文字として追加される（安全）
</script>
ここが重要です：append の文字列は HTML を実行しません。動的に HTML を差し込みたい場面でも、まずは textContent/append（文字列）で安全を最優先にし、どうしても必要なときだけ信頼済みのテンプレートや sanitize 済みの HTML を使います。
配置のバリエーション（先頭・前後・近傍への追加）
先頭に入れたいなら prepend、前後に置きたいなら before/after
<ul id="list"><li>既存</li></ul>
<script>
const list = document.getElementById("list");
const li1 = document.createElement("li"); li1.textContent = "先頭";
const li2 = document.createElement("li"); li2.textContent = "末尾";
list.prepend(li1); // 先頭に追加
list.append(li2); // 末尾に追加
</script>
ここが重要です：append は“末尾限定”。先頭は prepend、特定要素の直前・直後は before/after、要素の中の先頭/末尾や外側の前後へ文字列や要素を差すなら insertAdjacentElement/HTML が便利です。
DocumentFragment と組み合わせて高速化（一括作成→一括追加）
フラグメントにためてから append
<ul id="list"></ul>
<script>
const frag = document.createDocumentFragment();
for (let i = 1; i <= 500; i++) {
const li = document.createElement("li");
li.textContent = `項目 ${i}`;
frag.append(li);
}
document.getElementById("list").append(frag); // 一度で展開される
</script>
ここが重要です：大量追加はフラグメントに“ためる”→親へ一度で append。レイアウト再計算・リフローが最小化され、体感が軽くなります。
実践例（通知、フォームの補足、カード組み立て）
トースト通知を表示して一定時間で消す
<script>
function toast(text) {
const t = document.createElement("div");
t.className = "toast";
t.textContent = text;
document.body.append(t);
setTimeout(() => t.remove(), 2000);
}
toast("保存しました");
</script>
ここが重要です：create → 設定 → append → タイマーで remove の型を覚えると、使い捨て UI を手早く作れます。
フォームラベルの補足説明を末尾に追加
<label id="email-label">メール</label>
<script>
const label = document.getElementById("email-label");
label.append("（会社のメールを推奨）"); // 文字列で補足
</script>
ここが重要です：文字列をそのまま追加できるので、小さな補足を足す処理が簡潔に書けます。
カード要素へ複数パーツを一度で追加
<div id="card"></div>
<script>
const card = document.getElementById("card");
const title = document.createElement("h3"); title.textContent = "りんご";
const desc = document.createElement("p"); desc.textContent = "甘いです";
const btn = document.createElement("button"); btn.textContent = "購入";
card.append(title, desc, btn); // まとめて末尾に追加
</script>
ここが重要です：append の複数引数で“組み立て完了したパーツ”を一括で差し込み、コードを短く保てます。
既存ノードの扱い（移動・複製の注意点）
同じノードを append すると“移動”になる
<div id="a"></div>
<div id="b"></div>
<script>
const p = document.createElement("p");
p.textContent = "移動の例";
document.getElementById("a").append(p); // a の末尾へ
document.getElementById("b").append(p); // b の末尾へ“移動”（a からは消える）
</script>
ここが重要です：DOM ノードは唯一個体。二箇所へ同時配置はできません。複製したいなら cloneNode(true) を使い、片方にコピーを追加します。
よくある落とし穴と回避策（id重複・innerHTML乱用・性能）
id の重複
複製して追加する場合、同じ id が共存すると参照が壊れます。挿入前に id を一意に変更します。ここが重要です：テンプレートでは id を避け、class や data-* を使うと安全です。
innerHTML の乱用
外部入力を innerHTML で追加すると XSS の危険があります。ここが重要です：append の文字列や textContent を基本にし、HTML片が必要なときは信頼済みテンプレートやサニタイズ済みの文字列を使う方針にします。
大量挿入の重さ
1件ずつ append を繰り返すとリフローが多く発生します。ここが重要です：DocumentFragment へためて“一括挿入”、または replaceChildren と組み合わせてまとめて差し替えます。
まとめ
append は「末尾へ柔軟に追加」するためのモダンなメソッドです。ノードも文字列も渡せ、複数引数で一度に追加できるため、初心者にも書きやすく安全です。先頭や前後の挿入は prepend/before/after を使い分け、大量追加は DocumentFragment で高速化。既存ノードは“移動”になる点、id重複と innerHTML の安全性に注意すれば、意図通りで読みやすいノード追加が書けます。