Attributes

Get ( hx-get )

• By default, an HTMX response is put inside as a child of the element that made the request.

• It replaces the content that was inside that element.

Swap ( hx-swap )

• It defines the placement strategy.

• innerHTML

  • Replaces the content inside the element.

  • The default value.

• outerHTML

  • Replaces the element itself, not the inside of the HTML element.

• beforeend

  • Inject right before the end of the target; before the closing tag.

• afterend

  • Inject right after the end of the target; after the closing tag.

Target ( hx-target )

• Uses a CSS selector to specify where the content should be placed.

• It defines the place where it should be placed.

Events ( hx-on )

• You write JS inside, as a response to the event.

• Embeds JavaScript inline to handle events directly in HTML.

• How often is this used :

  • Most developers use hx-*  attributes for declarative behavior and attach broader JS logic via event listeners in separate scripts.

  • hx-on  appears mainly in:

    • Small demos or prototypes.

    • Inline UI tweaks that don’t merit full scripts.

    • Cases where deployment constraints forbid custom JS files.

  • Production code usually avoids inline JS for readability, security (CSP issues), and maintainability.

  • So: common in examples, uncommon in real systems.