Cómo usar hx-target en HTMX con ejemplos prácticos

El atributo hx-target (en inglés: “target” - Objetivo) define el destino en el DOM donde se insertará el contenido devuelto por la petición HTMX.

  hx-target

Por defecto, la respuesta reemplaza el contenido del elemento que dispara la solicitud, pero con hx-target puedes especificar otro elemento para actualizarlo en su lugar.
Esto permite mayor flexibilidad para actualizar diferentes partes de la página sin recargarla por completo, mejorando la interactividad y experiencia del usuario.
Puedes usar selectores como ID, clases, o relaciones relativas (por ejemplo, closest, parent, next) para apuntar al elemento deseado.

hx-target="#id"

Selecciona el elemento con el ID especificado para insertar la respuesta de la petición HTMX.
Esto permite actualizar un área específica de la página diferente al elemento que disparó la solicitud.

html 
<button hx-get="/actualizar" hx-target="#contenido">Actualizar contenido</button>

  <div id="contenido">Contenido inicial</div>
  hx-target con id

  • La respuesta reemplazará el contenido del elemento con id contenido.

hx-target=".class"

Selecciona el primer elemento con la clase indicada para insertar la respuesta de la petición HTMX.
Útil para actualizar solo un elemento específico cuando hay varios con la misma clase.

html 
<button hx-get="/actualizar" hx-target=".mensaje">Actualizar mensaje</button>

  <div class="mensaje">Mensaje inicial 1</div>
  <div class="mensaje">Mensaje inicial 2</div>
  hx-target con clase

  • La respuesta se insertará en el primer elemento con la clase mensaje.

hx-target="closest .class"

Selecciona el elemento más cercano con la clase indicada al elemento que activó la petición.
Ideal para actualizar un contenedor padre o cercano sin afectar otros elementos similares en la página.

html 
<div class="contenedor">
  <button hx-get="/actualizar" hx-target="closest .contenedor">Actualizar contenedor</button>
  <div class="contenedor">Contenido 1</div>
  </div>
  hx-target con closest

  • La respuesta reemplaza el contenido del elemento más cercano con la clase contenedor al botón.

hx-target="self"

La respuesta reemplaza el contenido del mismo elemento que disparó la petición,
actualizando directamente ese elemento sin afectar a otros.

html 
<button hx-get="/actualizar" hx-target="self">Actualizar botón</button>
  hx-target self

  • La respuesta reemplaza el contenido del propio botón.

hx-target="next"

La respuesta reemplaza el contenido del siguiente hermano inmediato del elemento que disparó la petición,
actualizando solo ese elemento adyacente.

html 
<button hx-get="/actualizar" hx-target="next">Actualizar siguiente</button>

  <div>Contenido siguiente</div>
  hx-target next

  • La respuesta reemplaza el contenido del siguiente hermano inmediato del botón.

hx-target="prev"

La respuesta reemplaza el contenido del hermano inmediato anterior al elemento que activó la petición,
actualizando solo ese elemento previo.

html 
<div>Contenido previo</div>
  <button hx-get="/actualizar" hx-target="prev">Actualizar previo</button>
  hx-target prev

  • La respuesta reemplaza el contenido del hermano inmediato anterior al botón.

hx-target="parent"

La respuesta reemplaza el contenido del elemento padre directo del que disparó la solicitud,
permitiendo actualizar ese contenedor específico.

html 
<div>
  <button hx-get="/actualizar" hx-target="parent">Actualizar padre</button>
  </div>
  hx-target parent

  • La respuesta reemplaza el contenido del elemento padre del botón.

hx-target="body"

La respuesta reemplaza todo el contenido del elemento <body>,
actualizando toda la página visible dentro del cuerpo del documento.

html 
<button hx-get="/actualizar" hx-target="body">Actualizar body</button>
  hx-target body

  • La respuesta reemplaza todo el contenido del <body>.

hx-target="window"

La petición envía la respuesta al objeto ventana del navegador,
útil para manejar eventos o lógica sin alterar el contenido visible del DOM.

html 
<button hx-get="/actualizar" hx-target="window">Actualizar ventana</button>
  hx-target window

  • Enviar la respuesta a la ventana actual, útil para disparar eventos personalizados.