Внеплановые замены

Если вы хотите заменить контент в DOM непосредственно из ответа, используя атрибут id, вы можете использовать атрибут hx-swap-oob в HTML-ответе:

<div id="message" hx-swap-oob="true">Замените меня напрямую!</div>
Дополнительный контент

В этом ответе элемент div#message будет заменен непосредственно в соответствующем DOM-элементе, в то время как дополнительный контент будет заменен в целевом элементе обычным способом.

Вы можете использовать эту технику для «прикрепления» обновлений к другим запросам.

Проблемные таблицы

Элементы таблицы могут вызывать проблемы при комбинировании с внеплановыми заменами, поскольку согласно спецификации HTML многие из них не могут находиться отдельно в DOM (например, <tr> или <td>).

Чтобы избежать этой проблемы, можно использовать тег template для инкапсуляции этих элементов:

<template>
  <tr id="message" hx-swap-oob="true"><td>Джо</td><td>Смит</td></tr>
</template>

Выбор контента для замены

Если вы хотите выбрать подмножество HTML-ответа для замены в целевой элемент, можно использовать атрибут hx-select, который принимает CSS-селектор и выбирает соответствующие элементы из ответа.

Также можно выбрать части контента для внеплановой замены, используя атрибут hx-select-oob, который принимает список идентификаторов элементов для выбора и замены.

Сохранение контента при замене

Если есть контент, который вы хотите сохранить при заменах (например, видеоплеер, который должен продолжать воспроизведение, даже если происходит замена), вы можете использовать атрибут hx-preserve на элементах, которые вы хотите сохранить.