hx-swapって何？
HTMXを使っています。使いつつ調べたことを記録します。
HTMXを使っていてサーバーからのレスポンスを挿入する方法を調整したい際、hx-swapを利用できます。以下が使用例です。
<div id="messages">
<p>既存のメッセージ</p>
</div>
<button hx-get="/new-message" hx-target="#messages" hx-swap="beforeend">
新しいメッセージを追加
</button>
この例では、レスポンスが #messages の末尾に追加されていきます。
指定できる値は以下のようなものがあります。
innerHTML— ターゲットの中身を置き換える（デフォルト）outerHTML— ターゲット要素ごと置き換えるbeforebegin— ターゲットの直前に挿入afterbegin— ターゲットの先頭に挿入beforeend— ターゲットの末尾に挿入afterend— ターゲットの直後に挿入delete— ターゲットを削除（レスポンスは無視）none— 何もしない
さらに、スペース区切りで修飾子を追加し、挿入方法を制御できます。例えば hx-swap="innerHTML swap:300ms" とすると、300msの遅延を追加できます。hx-swap="innerHTML scroll:top" でスワップ後にスクロール位置を調整できます。transition:true を付ければView Transitionsを使ったアニメーションを追加できます。
公式ドキュメントは以下です。