Control how fetched content replaces existing content with swap strategies.
Swap Strategies
Use data-swap to control how content is inserted:
| Strategy | Description | Use Case |
|---|---|---|
inner | Replace innerHTML (default) | Most page content |
outer | Replace entire element | Updating a component |
prepend | Insert at beginning | New notifications |
append | Insert at end | Infinite scroll |
before | Insert before element | Add row above |
after | Insert after element | Add row below |
delete | Remove element | Delete item from list |
none | Don't swap | Fire-and-forget requests |
Examples
Inner (Default)
HTML
<a href="/page" data-target="#content">Load</a><div id="content">Old content replaced</div>Append (Infinite Scroll)
HTML
<ul id="feed"> <li>Post 1</li> <li>Post 2</li></ul><button data-href="/posts?page=2" data-target="#feed" data-swap="append"> Load More</button>Prepend (Notifications)
HTML
<ul id="notifications" data-sse="/events" data-swap="prepend"> <!-- New items appear at top --></ul>Delete
HTML
<tr id="user-123"> <td>John Doe</td> <td> <button data-href="/users/123" data-method="delete" data-target="#user-123" data-swap="delete"> Remove </button> </td></tr>Fragment Selection
Use data-select to extract a portion of the response:
HTML
<a href="/full-page" data-target="#sidebar" data-select="#sidebar-content"> Load Sidebar</a>This fetches /full-page but only inserts the #sidebar-content element from the response.
Target Options
CSS Selector
TEXT
data-target="#main"data-target=".content-area"data-target="[data-content]"Self
HTML
<div data-href="/api/status" data-target="self" data-trigger="load"> Loading...</div>Out-of-Band Swaps
Update multiple elements from a single response using data-oob:
HTML
<!-- In your response HTML --><div id="notification-count" data-oob data-swap="outer"> <span class="badge">5</span></div> <div id="main-content"> Main response content here</div>Elements with data-oob are swapped into matching elements by ID, regardless of the main target.
Cascade Reminder:
data-swapinherits from ancestors. Set a default on a container, override only where needed.