Understand the default target

When no hx-target is present, the element that issued the request is the target. HTMX swaps the response into the same node that triggered the exchange.

<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. A “Check availability” button that becomes “In stock” after one click is a natural fit for the default.

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. Browsers may silently repair invalid nesting, and you will stare at the page wondering why the layout looks almost right.

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 alone.

I use the default target for small inline status changes on the triggering control. Anything that replaces a list, a form, or a card gets an explicit hx-target. That rule of thumb saves me from nesting block elements inside buttons.

The default swap and default target work together. You get innerHTML into the triggering element unless you override either setting. Knowing both defaults helps you read unfamiliar markup quickly.

Try this on your own project: click one control with no hx-target and write down the DOM you expect before you look at the page.