071. afterend（直後に挿入：ターゲットの「外」のすぐ下に配置する）
原理：「となり」の次に居場所を作る
自分を壊さず、後ろに仲間を増やす
「afterend（アフター・エンド）」は、ターゲットとなる要素を基準にして、その「直後（外側のすぐ下）」に新しいHTMLを配置する方法です。
第4章の序盤で学んだ beforebegin（直前）と対になる機能で、今あるものを動かしたり消したりせずに、そのすぐ後ろに情報を置きたいときに威力を発揮します。
実践：さりげなく情報を「付け足す」
1. ボタンを押したあとにメッセージを出す
ボタン自体は消さずに、そのすぐ下に「保存しました」などの通知を一時的に出したい時の例です。
<!--
hx-target: this (自分自身)
hx-swap: afterend (自分の「外」のすぐ下に足す)
-->
<button hx-post="/api/save"
hx-target="this"
hx-swap="afterend">
保存する
</button>
<!-- ボタンを押すと、ここに <div>保存しました</div> が出現します -->
2. フォームの入力欄を動的に増やす
「項目を追加」ボタンを押したときに、そのボタンの直前に新しい入力フィールドをどんどん増やしていくようなUIに最適です。
<div id="field-marker"></div> <!-- ここを基準点にする -->
<button hx-get="/api/new-field"
hx-target="#field-marker"
hx-swap="afterend">
入力欄を追加
</button>
3. ステップ・バイ・ステップ解説
- 目印（基準点）を決める: 「どこの後ろに置きたいか」を決めてIDや
thisを使います。 - 挿入モードの指定:
hx-swap="afterend"を指定します。 - サーバーの応答: サーバーは、新しく追加したいタグ（例：
<span>チェック完了</span>）を返します。
比較：beforeend vs afterend（内の最後か、外の次か）
beforeend（内の最後）
- イメージ: 封筒の中に、最後の一枚を入れる。
- 構造:
<div>ここに挿入される</div>
afterend（外の次）
- イメージ: 封筒の「隣」に、新しい封筒を置く。
- 構造:
<div>ターゲット</div>ここに出る
まとめ：初心者のための「隣接」のデザイン
afterend は、今の画面の流れを断ち切ることなく、新しい情報を「自然な続き」として見せるための優れた手段です。
- 基準点を「不動」にする: 挿入されたあとも基準点が残っているため、同じボタンで何度でも「その次」に要素を足し続けることができます。
- HTML構造のチェック:
beforebeginと同様、afterendもターゲットの「外」に置くものです。リストの<li>を増やしたい場合は、その「親」である<ul>に対してbeforeendを使う方が、HTMLとして正しい構造になりやすいです。 - 一時的な情報の表示に: 計算結果をちょっと出したり、ヘルプテキストを表示したり。そんな「脇役」の登場に最適な属性です。
今あるものの、すぐ隣へ。afterend を使って、画面が生き物のように成長していく、ダイナミックなUIを実現してください。次の記事では、ターゲットを綺麗に消滅させる「delete」（072. delete）をご紹介します。