070. beforeend（末尾に挿入：ターゲットの内側の「一番下」に付け足す）
原理：最後列に並んでもらう安定感
読み進める順に積み重なる
「beforeend（ビフォー・エンド）」は、ターゲットとなる要素（箱）の「内側」の一番最後、つまり末尾の子要素として新しいHTMLを差し込む方法です。
文章を上から下へ読むように、新しい情報をどんどん「下へ下へと」付け足していく際に使います。 これは、ログの表示、過去に遡るチャットの履歴、あるいは「もっと見る」ボタンで無限に続くニュースリストなどを作る際、最も自然で馴染み深い更新スタイルになります。
実践：終わりのないリスト（無限スクロール）の基礎
1. 「もっと見る」ボタンで項目を増やす
ボタンを押すと、今あるリストを消さずに、その下に新しい項目が追加される例です。
<!--
hx-target: #item-container (中身を溜める箱)
hx-swap: beforeend (箱の中の「一番最後」に足し続ける)
-->
<div id="item-container">
<div class="item">最初の商品</div>
<div class="item">二番目の商品</div>
<!-- 新しい商品は、この(内側の最後)に追加されていきます -->
</div>
<button hx-get="/api/more-items"
hx-target="#item-container"
hx-swap="beforeend">
もっと見る
</button>
2. 掲示板やチャット（標準表示）
古い投稿が上にあり、新しい投稿が下に増えていくタイプのUIに最適です。
<div id="chat-log" style="overflow-y: scroll; height: 300px;">
<!-- 続々とメッセージが下に溜まっていく -->
</div>
<form hx-post="/send-chat" hx-target="#chat-log" hx-swap="beforeend">
<input type="text" name="msg">
<button type="submit">送信</button>
</form>
3. ステップ・バイ・ステップ解説
- 箱（コンテナ）の準備: 要素を並べておきたい
divやtbodyなどにIDを付けます。 - 挿入モードの指定:
hx-swap="beforeend"を指定します。 - サーバーの応答: サーバーは新しく追加したい分だけのHTML（例：
<div class="item">追加分</div>）を返します。
比較：afterbegin vs beforeend（上か下か）
afterbegin（内の先頭）
- 向き: 上に増える。
- 用途: 最新ニュース、SNSのタイムライン、最新メール。
beforeend（内の末尾）
- 向き: 下に増える。
- 用途: 「もっと見る」リスト、チャットの履歴、ログ、物語の続き。
まとめ：初心者のための「物語」の繋ぎ方
beforeend は、ユーザーのこれまでの操作や閲覧を尊重しつつ、その「延長線上」に新しい世界を広げるための属性です。
- 不変の土台: 既に表示されている古い情報を消さないため、ユーザーは「自分がどこまで見たか」を見失うことなく、安心してページを読み進めることができます。
- 無限スクロールへの道: 次の章で学ぶ「スクロールで自動発火」とこの
beforeendを組み合わせれば、あの有名な「無限に続くページ」が作れます。 - tbodyとの相性: テーブル（表）に新しい行を足したいとき、
<tbody>要素に対してbeforeendを使うのが、最も正しいHTMLの作法です。
過去から未来へ、上から下へ。beforeend という接着剤を使って、ユーザーをどこまでも導く、豊かで途切れることのないコンテンツ体験を提供してください。次の記事では、ターゲットの「外側のすぐ下」に配置する「afterend」（071. afterend）をご紹介します。