Targets and swaps

Understand the default target

Know that HTMX normally swaps the response into the element that initiated the request.

8 minute lesson

~~~

When no hx-target is present, the element that issued the request is the target:

<button hx-get="/availability/42">
  Check availability
</button>

The default swap is innerHTML. If the server returns <strong>In stock</strong>, the result is:

<button hx-get="/availability/42">
  <strong>In stock</strong>
</button>

The button remains, including its hx-get, so it can be clicked again. This is useful when a control is meant to update its own label or contents.

It is wrong when the response represents another region. A button that loads an account panel should target the panel, not place a <section> inside the button.

Before adding hx-target, predict the exact resulting DOM under the default. If that markup is invalid or surprising, choose an explicit target. Inspect the Elements panel after the swap rather than relying on the visual result—the browser may repair invalid nesting in unexpected ways.

Lesson completed