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.
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.
<button hx-get="/actualizar" hx-target="#contenido">Actualizar contenido</button>
<div id="contenido">Contenido inicial</div>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.
<button hx-get="/actualizar" hx-target=".mensaje">Actualizar mensaje</button>
<div class="mensaje">Mensaje inicial 1</div>
<div class="mensaje">Mensaje inicial 2</div>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.
<div class="contenedor">
<button hx-get="/actualizar" hx-target="closest .contenedor">Actualizar contenedor</button>
<div class="contenedor">Contenido 1</div>
</div>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.
<button hx-get="/actualizar" hx-target="self">Actualizar botón</button>hx-target="next"La respuesta reemplaza el contenido del siguiente hermano inmediato del elemento que disparó la petición,
actualizando solo ese elemento adyacente.
<button hx-get="/actualizar" hx-target="next">Actualizar siguiente</button>
<div>Contenido siguiente</div>hx-target="prev"La respuesta reemplaza el contenido del hermano inmediato anterior al elemento que activó la petición,
actualizando solo ese elemento previo.
<div>Contenido previo</div>
<button hx-get="/actualizar" hx-target="prev">Actualizar previo</button>hx-target="parent"La respuesta reemplaza el contenido del elemento padre directo del que disparó la solicitud,
permitiendo actualizar ese contenedor específico.
<div>
<button hx-get="/actualizar" hx-target="parent">Actualizar padre</button>
</div>hx-target="body"La respuesta reemplaza todo el contenido del elemento <body>,
actualizando toda la página visible dentro del cuerpo del documento.
<button hx-get="/actualizar" hx-target="body">Actualizar body</button><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.
<button hx-get="/actualizar" hx-target="window">Actualizar ventana</button>