Cómo usar el atributo `hx-swap` en HTMX

HTMX ofrece múltiples modos para intercambiar el HTML recibido en el DOM mediante el atributo hx-swap (en inglés: “swap” - Intercambio).

  hx-target

Por defecto, el contenido reemplaza el interior del elemento objetivo con innerHTML, pero puedes personalizar este comportamiento para insertar o reemplazar contenido de distintas maneras y crear interfaces web dinámicas sin necesidad de escribir JavaScript adicional.

1Atributo hx-swap='innerHTML'

Reemplaza el contenido del elemento de destino con el contenido devuelto, sin afectar el resto del DOM.

html 
<button hx-get="/contenido" hx-swap="innerHTML" hx-target="#contenedor">
  Reemplazar contenido interno
</button>

<div id="contenedor">
  Contenido original
</div>
  Reemplaza el contenido interno del elemento

  • hx-swap="innerHTML": Reemplaza solo el contenido dentro del elemento destino.

2Atributo hx-swap='outerHTML'

Reemplaza todo el elemento de destino con el contenido devuelto, incluyendo su etiqueta.

html 
<button hx-get="/nuevo-elemento" hx-swap="outerHTML" hx-target="#contenedor">
  Reemplazar elemento completo
</button>

<div id="contenedor">
  Elemento original
</div>
  Reemplaza todo el elemento destino

  • hx-swap="outerHTML": Reemplaza el elemento completo incluyendo su etiqueta.

3Atributo hx-swap='afterbegin'

Inserta el contenido devuelto al principio del elemento de destino, como primer hijo.

html 
<button hx-get="/contenido" hx-swap="afterbegin" hx-target="#contenedor">
  Insertar al inicio
</button>

<div id="contenedor">
  Contenido original
</div>
  Inserta el contenido al principio del elemento

  • hx-swap="afterbegin": Inserta el contenido devuelto como primer hijo del elemento destino.

4Atributo hx-swap='beforebegin'

Inserta el contenido devuelto justo antes del elemento de destino, como primer hijo.

html 
<button hx-get="/contenido" hx-swap="beforebegin" hx-target="#contenedor">
  Insertar antes del elemento
</button>

<div id="contenedor">
  Contenido original
</div>
  Inserta el contenido antes del elemento destino

  • hx-swap="beforebegin": Inserta el contenido devuelto justo antes del elemento destino.

5Atributo hx-swap='afterend'

Inserta el contenido devuelto justo despues del elemento de destino, como ultimo hijo.

html 
<button hx-get="/contenido" hx-swap="afterend" hx-target="#contenedor">
  Insertar después del elemento
</button>

<div id="contenedor">
  Contenido original
</div>
  Inserta el contenido después del elemento destino

  • hx-swap="afterend": Inserta el contenido devuelto justo después del elemento destino.

6Atributo hx-swap='none'

No realiza ningún intercambio de contenido, pero permite que la petición y los eventos asociados se ejecuten normalmente.

html 
<button hx-get="/contenido" hx-swap="none" hx-target="#contenedor" hx-on="htmx:afterOnLoad: alert('Contenido cargado')">
  No intercambiar contenido
</button>

<div id="contenedor">
  Contenido original
</div>
  No realiza intercambio de contenido

  • hx-swap="none": No modifica el DOM, aunque la petición se realiza y puede usarse para disparar eventos.