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">
        注册!
    </button>
</div>

来自/register URL的响应将被追加到id为response-div的div元素中。

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

<a hx-post="/new-link" hx-target="this" hx-swap="outerHTML">新链接</a>

注意

• hx-target属性可被继承，可以放置在父元素上