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:

0:	Introduction
1:	Why htmx
2:	The core idea of htmx
3:	Installing htmx
4:	Doing a GET request
5:	▶︎ Swap
6:	POST request
7:	Targets
8:	Loading indicator
9:	Confirming actions, and prompts
10:	Triggers
11:	Request headers
12:	Response headers
13:	Events
14:	Redirect after request
15:	Send files using htmx.ajax()
16:	Perform something on page load
17:	Conditionally hide HTML elements based on HTMX request status
18:	htmx + Alpine template tag
19:	htmx, include hidden input fields outside of a form
20:	htmx trigger request via JS event