068. beforebegin（直前に挿入：自分の「前」に新しい要素を置く）
原理：「となり」に居場所を作る
自分を壊さず、仲間を増やす
これまでの innerHTML や outerHTML は、「入れ替える（上書きする）」という動きでした。しかし、今あるものを消さずに、その「直前（外側のすぐ上）」に新しいHTMLをポンと置きたい場合があります。
それが beforebegin（ビフォー・ビギン）です。
ターゲットとなる要素を「基準点」として、その手前に新しいパーツを挿入します。これは、リストの上の方に新しい項目を足したり、警告メッセージを要素の上にパッと出したりするのに非常に便利です。
実践：リストの先頭に「新しい風」を吹かせる
1. 新着ニュースを一番上に足す
最新のニュースが届くたびに、今のニュースを下に押し下げて、一番上に新しい行を追加する例です。
<!--
hx-target: #news-list (リストの本体)
hx-swap: beforebegin (リストのタグそのものより「前」に置く)
-->
<button hx-get="/api/latest-news"
hx-target="#news-list"
hx-swap="beforebegin">
最新ニュースを確認
</button>
<ul id="news-list">
<li>昨日のニュース：平和でした。</li>
</ul>
<ul> の「外側」に新しい <li> が出てしまい、HTMLのルール（ulの中にはliを入れるという原則）から外れてしまうことがあります。
2. 正しい使いどころ：エラーメッセージの表示
入力フォームの上に、サッと警告メッセージを差し込むような使い方が最も安全で効果的です。
<div id="error-anchor"></div> <!-- 基準となる透明な目印 -->
<button hx-post="/api/save"
hx-target="#error-anchor"
hx-swap="beforebegin">
保存する
</button>
3. ステップ・バイ・ステップ解説
- 基準点を決める: 「どこに足したいか」の目印となる要素を選びます。
- swapの指定:
hx-swap="beforebegin"を書き込みます。 - 挿入される場所: ターゲットのタグが開く
より前にHTMLが差し込まれます。
比較：innerHTML系 vs 挿入系（beforebeginなど）
innerHTML系（入れ替え）
- 結果: 1つあったものが、新しい1つに変わる。
挿入系（追加）
- 結果: 1つあったものが残されたまま、2つ（あるいはそれ以上）に増える。
まとめ：初心者のための「空間」の活用術
beforebegin は、既存の画面レイアウトを壊すことなく、新しい情報をそっと「添える」ためのテクニックです。
- 基準点は「動かないもの」に: 基準にする要素自体が消えたり動いたりすると、次に追加される場所もズレてしまいます。土台はしっかりしたID付きの要素を選びましょう。
- HTML構造を意識する:
beforebeginはターゲットの「外」に置くものです。リストの「中」に足したい場合は、次々回に紹介するafterbeginの方が適していることが多いです。 - ログや履歴の表示に: 次々と新しい情報が上に積み重なっていくようなUIを作るときに、非常に重宝します。
今あるものの一歩前へ。beforebegin を使って、流れるように新しい情報が追加されていく、活気ある画面をデザインしてください。次の記事では、ターゲットの「内側の一番上」に潜り込ませる「afterbegin」（069. afterbegin）をご紹介します。