hx-target

hx-target 属性允许您将交换目标设置为不同于发出 AJAX 请求的元素。此属性的值可以是：

• 目标元素的 CSS 查询选择器。
• this，表示带有 hx-target 属性的元素本身是目标。
• closest <CSS selector>，将找到匹配给定 CSS 选择器的最近祖先元素或自身（例如 closest tr 将针对元素最近的表格行）。
• find <CSS selector>，将找到匹配给定 CSS 选择器的第一个子后代元素。
• next，解析为 element.nextElementSibling。
• next <CSS selector>，将向前扫描 DOM，找到匹配给定 CSS 选择器的第一个元素（例如 next .error 将针对具有 error 类的最近后续兄弟元素）。
• previous，解析为 element.previousElementSibling。
• previous <CSS selector>，将向后扫描 DOM，找到匹配给定 CSS 选择器的第一个元素（例如 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>

Notes

• hx-target 是可继承的，可以放置在父元素上