prepend とは何か
prepend は、親ノードの「先頭」にコンテンツを追加するメソッドです。ノード（要素やテキストノード）だけでなく、文字列も直接渡せ、さらに複数の引数を一度に追加できます。ここが重要です：append が“末尾”、prepend は“先頭”。既存の最初の子の“前”に入るため、並び順を直感的に制御できます。
基本の使い方（ノード・文字列・複数を一度で先頭へ）
ノードを先頭に追加する
<div id="box"><span>既存末尾</span></div>
<script>
const box = document.getElementById("box");
const strong = document.createElement("strong");
strong.textContent = "先頭に入る";
box.prepend(strong); // <strong>が最初の子になる
</script>
ここが重要です：既存ノードがあっても、その“前”に差し込まれます。視覚的に上部へ置きたい時に最短の手段です。
文字列を直接先頭へ追加する
<div id="box"></div>
<script>
const box = document.getElementById("box");
box.prepend("テキストを先頭に追加"); // テキストノードとして追加（HTMLは実行されない）
</script>
ここが重要です：文字列はテキストとして安全に扱われます。ユーザー入力を入れる場面でも、XSSの心配なく使えます。
複数のアイテムを一気に追加する
<div id="box"><em>既存</em></div>
<script>
const box = document.getElementById("box");
const a = document.createElement("a"); a.textContent = "リンク";
const b = document.createElement("b"); b.textContent = "太字";
box.prepend("テキスト", a, b); // 3つがこの順で先頭に並ぶ
</script>
ここが重要です：prepend は複数引数が使えます。“テキスト＋要素＋要素”のような組み合わせでも、一度の呼び出しで整った並びにできます。
append との違い（使い分けの軸）
追加位置と引数の柔軟性
append は末尾、prepend は先頭。どちらも文字列・ノード・複数引数が使え、戻り値はありません（undefined）。ここが重要です：上に置きたいなら prepend、下に積みたいなら append。実装意図がコードから即読めるため、可読性が高まります。
低レベル API との比較
先頭に入れる目的で insertBefore を使うなら parent.insertBefore(node, parent.firstChild) と書けますが、firstChild がテキストノードだと意図がブレることがあります。ここが重要です：prepend は要素・テキストの区別なく“先頭”を表現でき、短く正確です。
テキストノードと空白の扱い（先頭の定義を理解する）
空白や改行も“ノード”だが気にしなくてよい
HTML のインデントや改行はテキストノードになります。insertBefore だと firstChild が空白の可能性を考慮しますが、prepend はそれらを気にせず最初に差し込めます。ここが重要です：“先頭”という意図を正しく実現できるため、初心者でも安全に使えます。
既存ノードの移動と複製（唯一性のルール）
同じノードを prepend すると“移動”になる
<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").prepend(p); // b の先頭へ“移動”（a からは消える）
</script>
ここが重要です：DOMノードは唯一個体。二箇所へ同時配置はできません。両方に同じ見た目を置きたいなら、cloneNode(true) で複製を作って片方に追加します。
大量挿入の高速化（DocumentFragment と組み合わせる）
フラグメントにためてから先頭へ一括追加
<ul id="list"><li>既存</li></ul>
<script>
const frag = document.createDocumentFragment();
for (let i = 1; i <= 300; i++) {
const li = document.createElement("li");
li.textContent = `項目 ${i}`;
frag.appendChild(li);
}
document.getElementById("list").prepend(frag); // 300件が一度で先頭に入る
</script>
ここが重要です：一件ずつ先頭に差すより、フラグメントに“まとめて作る→一度で挿入”が圧倒的に軽い。レイアウト再計算を最小化できます。
セキュリティと安全な文字列化（innerHTML と使い分け）
ユーザー入力は文字として差し込む
<div id="messages"></div>
<script>
const messages = document.getElementById("messages");
const input = "<img onerror='alert(1)'>";
messages.prepend(input); // テキストとして追加。タグは実行されない
</script>
ここが重要です：動的 HTML を innerHTML で差すと XSS の危険が出ます。まずは prepend の文字列か textContent を使い、どうしても HTML が必要なら信頼済みテンプレートやサニタイズ済みの文字列に限定します.
実践例（ヘッダへの通知、ログの最新順、フォーム補助）
ヘッダの先頭に“お知らせ”を出す
<header id="head"><h1>サイト名</h1></header>
<script>
const head = document.getElementById("head");
const note = document.createElement("div");
note.className = "notice";
note.textContent = "メンテナンスは22:00から";
head.prepend(note); // 見出しの前に出る
</script>
ここが重要です：重要メッセージは“先頭に出す”のが合理的。prepend なら簡潔に意図を表現できます。
ログを“新しいものほど上”に積む
<ul id="logs"></ul>
<script>
function addLog(text) {
const li = document.createElement("li");
li.textContent = text;
document.getElementById("logs").prepend(li); // 最新が上
}
addLog("接続しました");
addLog("データ取得完了");
</script>
ここが重要です：最新順のUIは prepend 一発。並び替えコードを持たずに自然に最新が先頭になります。
フォームラベルに補足を先頭へ
<label id="label">メール</label>
<script>
const label = document.getElementById("label");
label.prepend("（必須）"); // “必須”を先頭に出す
</script>
ここが重要です：短い補足を視認性高く示したいとき、文字列 prepend が手早く安全です。
よくある落とし穴と回避策（id重複・大量操作・可読性）
同一 id の複製は参照を壊すため、挿入前に一意に変更する。大量操作はフラグメントでまとめてから一度で挿入し、パフォーマンスを保つ。構造が複雑なときは before/after や insertAdjacentElement(“afterbegin”) も検討すると、意図がさらに明確になる。ここが重要です：“先頭に入れる”意図を最短で表現し、ユニーク性・性能・安全性の三点を守る。
まとめ
prepend は「親の先頭に、文字列もノードも複数まとめて追加」できるモダンなメソッドです。append が末尾、prepend が先頭。既存ノードは“移動”になるため、複製が必要なら cloneNode を使う。大量挿入は DocumentFragment で高速化し、ユーザー入力は文字として扱って安全性を確保する。位置意図がコードにそのまま現れるため、初心者でも読みやすい“先頭追加”が確実に書けます。
