hx-swap — HTMX

hx-swap mengontrol bagaimana response HTML disisipkan ke target. Swap Strategies ... ... ... ... ... ... ... ... Modifiers

hx-swap mengontrol bagaimana response HTML disisipkan ke target.

Swap Strategies

<!-- Default: ganti isi dalam -->
<div hx-get="/api" hx-swap="innerHTML">...</div>

<!-- Ganti seluruh elemen -->
<div hx-get="/api" hx-swap="outerHTML">...</div>

<!-- Tambah sebelum isi -->
<div hx-get="/api" hx-swap="beforebegin">...</div>

<!-- Tambah di awal isi -->
<div hx-get="/api" hx-swap="afterbegin">...</div>

<!-- Tambah di akhir isi -->
<div hx-get="/api" hx-swap="beforeend">...</div>

<!-- Tambah setelah elemen -->
<div hx-get="/api" hx-swap="afterend">...</div>

<!-- Hapus target -->
<div hx-get="/api" hx-swap="delete">...</div>

<!-- Tidak swap (hanya trigger request) -->
<div hx-get="/api" hx-swap="none">...</div>

Modifiers

<div hx-swap="innerHTML swap:500ms settle:200ms">
  <!-- delay swap 500ms, settle animation 200ms -->
</div>

Yang akan kamu pelajari