htmx/www/attributes/hx-swap.md

layout	title
layout.njk	</> htmx - hx-swap

hx-swap

The hx-swap attribute allows you to specify how the response will be swapped in relative to the target of an AJAX request.

The possible values of this attribute are:

• innerHTML - The default, replace the inner html of the target element
• outerHTML - Replace the entire target element with the response
• beforebegin - Insert the response before the target element
• afterbegin - Insert the response before the first child of the target element
• beforeend - Insert the response after the last child of the target element
• afterend - Insert the response after the target element

These options are based on standard DOM naming and the Element.insertAdjacentHTML specification.

So in this code:

  <div hx-get="/example" hx-swap="afterend">Get Some HTML & Append It</div>

The div will issue a request to /example and append the returned content after the div

You can modify the amount of time that htmx will wait after receiving a response to swap the content by including a swap modifier:

  <!-- this will wait 1s before doing the swap after it is received -->
  <div hx-get="/example" hx-swap="innerHTML swap:1s">Get Some HTML & Append It</div>

Similarly, you can modify the time between the swap and the settle logic by including a settle modifier:

  <!-- this will wait 1s before doing the swap after it is received -->
  <div hx-get="/example" hx-swap="innerHTML settle:1s">Get Some HTML & Append It</div>

These attributes can be used to synchronize htmx with the timing of CSS transition effects.

Notes

• hx-swap is inherited and can be placed on a parent element
• The default value of this attribute is innerHTML
• The default swap delay is 0ms
• The default settle delay is 100ms