hx-swap-oob

hx-swap-oob属性允许您指定响应中的某些内容应该被交换到DOM中目标以外的位置，即"带外交换"。这使您可以在响应中附带更新其他元素。

考虑以下响应HTML：

<div>
 ...
</div>
<div id="alerts" hx-swap-oob="true">
    已保存！
</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>

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

棘手的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=属性的元素都会被处理以进行带外交换行为，包括当元素嵌套在主响应元素内时。在使用模板片段时，这可能会出现问题，其中片段可能被重新用作带外交换目标，同时也作为更大片段的一部分。当更大片段是主响应时，内部片段仍将被处理为带外交换，将其从DOM中移除。

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

注意事项