带外交换

如果你想使用id属性将响应中的内容直接交换到 DOM 中，则可以 在响应html 中使用hx-swap-oob属性：

<div id="message" hx-swap-oob="true">Swap me directly!</div>
Additional Content

在此响应中，div#message将直接交换到匹配的 DOM 元素中，而其他内容将以正常方式交换到目标中。

你可以使用此技术来“搭载”其他请求的更新。

麻烦的表格

表格元素与带外交换结合时可能会出现问题，因为根据 HTML 规范，许多元素无法在 DOM 中独立存在（例如<tr>或<td>）。

为了避免此问题，你可以使用template标签来封装这些元素：

<template>
    <tr id="message" hx-swap-oob="true"><td>Joe</td><td>Smith</td></tr>
</template>

选择要交换的内容

如果你想选择响应 HTML 的子集交换到目标中，你可以使用hx-select 属性，它采用 CSS 选择器并从响应中选择匹配的元素。

你还可以使用hx-select-oob属性挑选出用于带外交换的内容 ，该属性采用元素 ID 列表来挑选和交换。

交换期间保留内容

如果你希望在交换过程中保留内容（例如，即使发生交换，也希望视频播放器继续播放），则可以 在希望保留的元素上使用hx-preserve属性。