HTMX hx-target

When HTMX gets a response from the server, it needs to know where on the page to put that response. The hx-target attribute answers that question. Without hx-target, HTMX places the response inside the element that triggered the request. With hx-target, you point HTMX at any element on the page — near or far from the trigger.

Default Behavior Without hx-target

When you omit hx-target, the response replaces the content of the triggering element itself:

<button hx-get="/welcome">Click Me</button>

After the click, the button's inner content changes to whatever the server returned. This is rarely what you want for a button — but it is useful for divs that load their own content.

Basic Syntax

<button hx-get="/content" hx-target="#output">Load</button>

<div id="output">Content appears here.</div>

The value of hx-target is a CSS selector. Any valid CSS selector works — id selectors, class selectors, element selectors, or attribute selectors.

Selector Options

Using "this" as the Target

The special value this targets the element that holds the hx-target attribute:

<div hx-get="/bio" hx-target="this" hx-trigger="click">
  Click to load biography
</div>

When clicked, the div's own content is replaced by the server's response.

Using "closest" for List Items

The closest keyword walks up the DOM tree and finds the nearest ancestor that matches the selector. This is perfect for delete buttons inside list items:

<ul>
  <li id="item-1">
    Task One
    <button hx-delete="/tasks/1" hx-target="closest li" hx-swap="outerHTML">
      Delete
    </button>
  </li>
  <li id="item-2">
    Task Two
    <button hx-delete="/tasks/2" hx-target="closest li" hx-swap="outerHTML">
      Delete
    </button>
  </li>
</ul>

  Diagram for "closest":

  <ul>
    <li>  <--- "closest li" resolves to this <li>
      Task One
      <button hx-delete ... hx-target="closest li">Delete</button>
               |
               | HTMX walks UP the DOM tree
               | Finds the nearest <li> ancestor
               v
      The whole <li> gets replaced with server response
    </li>
  </ul>

Using "find" to Target a Child

The find keyword searches inside the trigger element for a matching descendant:

<div hx-get="/count" hx-trigger="click" hx-target="find span">
  Votes: <span>142</span>
</div>

The GET request fires on click. HTMX searches inside the div for the first <span> and replaces its content with the server's response — for example, "143".

Using "next" to Target a Sibling

<button hx-get="/hint" hx-target="next p">Show Hint</button>
<p>Hint appears here.</p>

HTMX walks forward in the DOM and finds the next <p> element after the button. It replaces that paragraph's content with the server response.

Targeting Multiple Elements

HTMX's hx-target accepts one CSS selector at a time. To update multiple parts of the page from a single request, use the Out of Band Swaps feature (covered later in the course). The server embeds special markers in the response HTML, and HTMX routes each marked piece to its own target automatically.

Full Page Diagram

  PAGE STRUCTURE:
  ┌─────────────────────────────────┐
  │  <header>                       │
  │    <nav>...</nav>               │
  │  </header>                      │
  │                                 │
  │  <main>                         │
  │    <button hx-get="/data"       │
  │            hx-target="#panel">  │◄── trigger element
  │      Load                       │
  │    </button>                    │
  │                                 │
  │    <section id="panel">         │◄── target element
  │      (empty)                    │    (response goes here)
  │    </section>                   │
  │  </main>                        │
  │                                 │
  │  <footer>...</footer>           │
  └─────────────────────────────────┘

  Header and footer stay untouched.
  Only #panel updates.

Key Takeaway

The hx-target attribute controls where server responses land on the page. Use CSS selectors to pinpoint any element. Use this to update the trigger itself, closest to walk up to a parent, find to drill into a child, and next or previous to hit siblings. Precise targeting keeps the rest of your page stable while only the relevant section updates.