hx-swap-oob

hx-swap-oob 属性允许您指定响应中的某些内容应交换到 DOM 中的目标以外的位置，即“带外”（Out of Band）。这允许您在响应中附带对其他元素的更新。

考虑以下响应 HTML：

<div>
 ...
</div>
<div id="alerts" hx-swap-oob="true">
    Saved!
</div>

第一个 <div> 将以通常的方式交换到目标中。然而，第二个 <div> 将作为 id 为 alerts 的元素的替换进行交换，并且不会进入目标。

hx-swap-oob 的值可以是：

如果值为 true 或 outerHTML（两者等效），则元素将内联交换。

如果给出交换值，则将使用该交换策略，并且对于除 outerHTML 以外的所有策略，都将剥离封装的标签对。

如果给出选择器，则所有匹配该选择器的元素将被交换。如果没有，则将交换 id 与新内容匹配的元素。

使用备选交换策略

如前所述，当使用除 true 或 outerHTML 以外的交换策略时，封装标签将被剥离，因此您需要使用正确的标签来封装返回的数据，以适应上下文。

在具有 <tbody> 的表格中尝试插入 <tr> 时：

<tbody hx-swap-oob="beforeend:#table tbody">
	<tr>
		...
	</tr>
</tbody>

一个“普通”表格：

<table hx-swap-oob="beforeend:#table2">
	<tr>
		...
	</tr>
</table>

<li> 可以封装在 <ul>、<ol>、<div> 或 <span> 中，例如：

<ul hx-swap-oob="beforeend:#list1">
	<li>...</li>
</ul>

<p> 可以封装在 <div> 或 <span> 中：

<span hx-swap-oob="beforeend:#text">
	<p>...</p>
</span>

问题表格和列表

请注意，您可以使用 template 标签来封装那些根据 HTML 规范无法独立存在于 DOM 中的元素类型（<tr>、<td>、<th>、<thead>、<tbody>、<tfoot>、<colgroup>、<caption>、<col> 和 <li>）。

以下是一个使用这种方式封装表格行的带外交换示例：

<div>
    ...
</div>
<template>
    <tr id="row" hx-swap-oob="true">
        ...
    </tr>
</template>

请注意，这些 template 标签将从页面的最终内容中移除。

棘手的 SVG

某些元素类型，如 SVG，使用特定 XML 命名空间来处理其子元素。这会导致内部元素在交换时无法正常工作，除非它们被封装在 svg 标签中。要修改现有 SVG 的内部内容，您可以使用 template 和 svg 标签来封装元素，从而应用正确的命名空间。

以下是一个使用这种方式封装 SVG 元素的带外交换示例：

<div>
    ...
</div>
<template><svg>
    <circle hx-swap-oob="true" id="circle1" r="35" cx="50" cy="50" fill="red" /> 
</svg></template>
<template><svg hx-swap-oob="beforebegin:#circle1">
    <circle id="circle2" r="45" cx="50" cy="50" fill="blue" /> 
</svg></template>

这将内联替换 circle1，然后在 circle1 之前插入 circle2。

请注意，这些 template 和 svg 包装标签将从页面的最终内容中移除。

嵌套 OOB 交换

默认情况下，响应中任何带有 hx-swap-oob= 属性的元素都会被处理为 OOB 交换行为，包括当元素嵌套在主响应元素中时。这在使用 template fragments 时可能会有问题，其中一个片段可能被重用为 OOB 交换目标，同时也是更大片段的一部分。当更大的片段是主响应时，内部片段仍将被处理为 OOB 交换，从而从 DOM 中移除它。

可以通过将配置 htmx.config.allowNestedOobSwaps 设置为 false 来更改此行为。如果此配置选项为 false，则仅当元素紧邻主响应元素时才处理 OOB 交换，其他位置的 OOB 交换将被忽略，并剥离与 OOB 交换相关的属性。

注意事项