hx-target

Атрибут hx-target позволяет указать другой элемент для замены, отличный от того, который инициирует запрос AJAX. Значение этого атрибута может быть:

• CSS селектором элемента для выбора.
• this, что указывает, что элемент, на котором находится атрибут hx-target, является целевым.
• closest <CSS selector>, который найдет ближайший родительский элемент или сам себя, соответствующий заданному CSS селектору (например, closest tr выберет ближайшую строку таблицы к элементу).
• find <CSS selector>, который найдет первый дочерний элемент-потомок, соответствующий заданному CSS селектору.
• next, что соответствует element.nextElementSibling
• next <CSS selector>, который сканирует DOM в прямом направлении, чтобы найти первый элемент, соответствующий заданному CSS селектору. (например, next .error выберет ближайший следующий элемент-потомка с классом error)
• previous, что соответствует element.previousElementSibling
• previous <CSS selector>, который сканирует DOM в обратном направлении, чтобы найти первый элемент, соответствующий заданному CSS селектору. (например, previous .error выберет ближайший предыдущий элемент-потомка с классом error)

Вот пример, который выбирает div:

<div>
    <div id="response-div"></div>
    <button hx-post="/register" hx-target="#response-div" hx-swap="beforeend">
        Register!
    </button>
</div>

Ответ с /register URL будет добавлен к div с id response-div.

Этот пример использует hx-target="this", чтобы создать ссылку, которая обновляет себя при нажатии:

<a hx-post="/new-link" hx-target="this" hx-swap="outerHTML">New link</a>

Примечания

• hx-target наследуется и может быть помещен на родительский элемент