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>

来自 url /register 的响应将附加到指定 id 为 response-div 的 div 。

此示例用于 hx-target="this" 创建一个在点击时自动更新的链接：

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

笔记

• hx-target 可以继承并放置在父元素上