hx-swap
![](https://d9hqioo2.ablogcms.io/media/001/202405/mode3_w640-sample5.jpg)
<a href="/sample/demo.html" hx-get="/sample/demo.html" hx-swap="outerHTML">demo</a>
※ hx-swap を outerHTML から afterend に変更してみましょう!
hx-swap option
innerHTML | 対象要素の内部HTMLを置き換えます。(default) |
---|---|
outerHTML | ターゲット要素全体を置き換えます。 |
afterbegin | ターゲット内の最初の子の前にコンテンツを追加します。 |
beforebegin | ターゲットの親要素のターゲットの前にコンテンツを追加します。 |
beforeend | ターゲット内の最後の子の後にコンテンツを追加します。 |
afterend | ターゲット親要素のターゲットの後にコンテンツを追加します。 |
delete | 応答に関係なくターゲット要素を削除します。 |
none | 応答からコンテンツを追加しません。 |