hx-target — HTMX

hx-target menentukan elemen mana yang akan menerima response HTML. CSS Selector Load Special Values Load Update Row Load Load find

hx-target menentukan elemen mana yang akan menerima response HTML.

CSS Selector

<button hx-get="/api/data" hx-target="#result">Load</button>
<div id="result"></div>

Special Values

<!-- Target ke elemen itu sendiri -->
<div hx-get="/api/data" hx-target="this">Load</div>

<!-- Target ke parent terdekat yang cocok -->
<button hx-get="/api/row" hx-target="closest tr">Update Row</button>

<!-- Target ke sibling berikutnya -->
<button hx-get="/api/data" hx-target="next .output">Load</button>

<!-- Target ke elemen sebelumnya -->
<button hx-get="/api/data" hx-target="previous .output">Load</button>

find

<div hx-get="/api/data" hx-target="find .content">
  <div class="content"><!-- response di sini --></div>
</div>

Yang akan kamu pelajari