Using the hx-swap attribute we can tell htmx to use a specific swap “strategy”.

The default is innerHTML which swaps the inner content of the selector.

But you can tell htmx to use another swap strategy with the hx-swap attribute.

For example hx-swap='outerHTML', which swaps the element that matches the selector too (in our example the entire <div id='data'></div>, with all its content).

This is common if from the server you return content wrapped in the div, like this:

<div id='data'>
  <p>test response</p>
</div>

You can use several other strategies including not doing anything with hx-swap='none' (which is what you want to do if the request response shouldn’t be swapped anywhere), or deleting an element with hx-swap='delete'

Or adding the response HTML at the top of a list included in the target with afterbegin (or at the bottom with beforeend).

Or add the response HTML before the target element with beforebegin (or after the target element with afterend).

This lets us do quite a lot of things.

One thing that I want to mention is “out of band swaps”, because this unlocked several opportunities in my mind.

Basically in the response we can return one or more HTML tags with the hx-swap-oob="true" attribute that are swapped in different places in the page:

<div id="message" hx-swap-oob="true">
  Show this in #message
</div>

<p>Show me as normal</p>

Lessons in this unit: