#2 – Основные атрибуты

HTMX — это инструмент, который позволяет оживить ваш сайт, не прибегая к JavaScript. Он работает за счёт специальных HTML-атрибутов, которые управляют поведением элементов на странице.

Что делает «hx-get»?

Атрибут hx-get указывает, что при взаимодействии с элементом должен быть выполнен HTTP GET-запрос по указанному адресу. Это может быть кнопка, ссылка или даже div.

Пример: если вы повесили hx-get="/profile", то при загрузке произойдёт запрос к /profile, и вы получите HTML-ответ от сервера.

Куда вставить результат?

По умолчанию HTMX вставит полученный от сервера HTML прямо в тот элемент, на который вы нажали. Но чаще всего нужно контролировать, куда именно попадёт этот ответ.

Для этого есть hx-target — он указывает, в какой элемент на странице загрузить результат. Например, hx-target="#result" загрузит HTML в блок с ID result.

Это особенно удобно для обновления части страницы без перезагрузки.

Как именно вставляется HTML?

HTMX даёт гибкость не только в том, куда вставить ответ, но и как его вставить. За это отвечает hx-swap.

Вот самые популярные режимы:

• innerHTML (по умолчанию) — заменяет содержимое целевого элемента
• beforebegin — вставляет HTML перед целевым элементом
• afterbegin — вставляет внутрь, но в начале
• beforeend — вставляет внутрь, но в конец
• afterend — вставляет после элемента