hx-target

hx-target 属性を使用すると、AJAX 要求を送信したものとは異なる要素でスワッピングのターゲットを指定できます。この属性の値は次の可能性があります。

• ターゲット要素の CSS クエリセレクタ。
• this は、hx-target 属性がある要素がターゲットであることを示します。
• closest <CSS セレクタ> で、指定された CSS セレクタに一致する最も近い祖先要素 (例: closest tr は要素に最も近い行をターゲットにします) または自身が見つかります (closest).
• find <CSS セレクタ> で、指定された CSS セレクタに一致する最初の子要素が見つかります。
• next は element.nextElementSibling に解決されます。
• next <CSS セレクタ> で、指定された CSS セレクタに一致する最初の要素を DOM の前方でスキャンします (例: next .error は error クラスの最も近い兄弟要素をターゲットにします)。
• previous は element.previousElementSibling に解決されます。
• previous <CSS セレクタ> で、指定された CSS セレクタに一致する最初の要素を DOM の後方からスキャンします (例: previous .error は error クラスの最も近い兄弟をターゲットにします)。

次のように div をターゲットにする例を示します。

<div>
    <div id="response-div"></div>
    <button hx-post="/register" hx-target="#response-div" hx-swap="beforeend">
        Register!
    </button>
</div>

/register URL からの応答は、ID が response-div の div に追加されます。

次の例では hx-target="this" を使用して、クリック時に自身を更新するリンクを作成します。

<a hx-post="/new-link" hx-target="this" hx-swap="outerHTML">New link</a>

メモ

• hx-target は継承され、親要素に配置できます。