hx-target

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

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

注意

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