Using htmx hx‑get to Dynamically Replace Page Content

Why hx‑get is a Go‑to for Simple AJAX

When you need to load a piece of HTML from the server and inject it into the page without writing any JavaScript, htmx’s hx-get attribute does the heavy lifting. It sends a GET request, receives an HTML fragment, and swaps that fragment into a target element. The result is a dynamic update that feels native to the browser and keeps the code declarative.

Mechanism in Action

Basic Usage

Place the hx-get attribute on an interactive element such as a button or link. Specify the URL to request, the target element (via hx-target), and the swap strategy (via hx-swap).

<button id="load-comments" hx-get="/api/comments" hx-target="#comment-list" hx-swap="outerHTML">
  Load Comments
</button>

<div id="comment-list">
  
</div>

When the button is clicked, the browser issues a GET to /api/comments. The server must return a complete HTML snippet that represents the new #comment-list element. htmx then replaces the outer element (because of outerHTML) with the response.

Server‑Side Response

For the example above, a typical server response might be:

<div id="comment-list">
  <h3>Comments</h3>
  <ul>
    <li>User A: Great post!</li>
    <li>User B: I disagree.</li>
  </ul>
</div>

Notice the id="comment-list" matches the target. htmx will drop the existing element and insert this new one.

Verification Checklist

1. Include the htmx script. Add <script src="https://unpkg.com/htmx.org@1.9.6/dist/htmx.min.js"></script> to the page header or before
2. Test the request. Open DevTools → Network, click the button, and confirm a GET to the expected URL with a 200 response containing Content-Type: text/html.
3. Inspect the DOM. After the request, the #comment-list element should be replaced. Use the Elements panel to verify the new markup.
4. Check for console errors. Missing htmx script or CORS issues will show as errors. Ensure the server allows cross‑origin requests if the page and API are on different origins.
5. Graceful degradation. Disable JavaScript in the browser and click the button. It should behave as a normal link (or form submit) if htmx is not loaded.

Limitations of hx‑get

• Only accepts HTML responses. JSON or XML must be converted to HTML on the server or processed by custom JavaScript.
• Event listeners attached to the original element are lost after a swap. Use event delegation or re‑initialize scripts in the response.
• Stateful interactions (e.g., form validation, optimistic UI) require additional attributes such as hx-trigger or custom JS callbacks.
• Older browsers that lack the History API will fall back to full page loads when hx‑push‑url is used.
• Content that needs to be indexed by search engines should be server‑side rendered; htmx swaps happen client‑side and are invisible to crawlers.

Common Mistakes to Avoid

• Forgetting the htmx script. Without it, attributes are ignored and you’ll see no network request.
• Using hx‑get on non‑interactive elements. Elements like <div> do not fire click events by default. Pair with hx-trigger="click" or use a button/link.
• Assuming swapped content retains old listeners. After a swap, the new DOM is fresh. Re‑attach listeners or use hx-swap-oob for out‑of‑band updates.
• Injecting unsanitized server data. Always escape or sanitize content to avoid XSS. htmx does not perform sanitization for you.

Practical Decision: When to Use hx‑get

If your requirement is to fetch a chunk of HTML and replace a section of the page—such as loading comments, refreshing a list, or toggling a modal—without writing JavaScript, hx-get is a lightweight, declarative solution. For more complex interactions that involve state management, multiple simultaneous requests, or non‑HTML payloads, consider augmenting htmx with custom scripts or a different framework.

Wrap‑Up

hmtx’s hx-get attribute provides a concise way to perform AJAX GET requests and swap HTML fragments. By following the example, verification steps, and being mindful of its limits, you can integrate dynamic content into your pages with minimal JavaScript boilerplate.