# Click to Load
<div id="demo-content" class="not-prose demo-container min-h-[328px]"></div>
## Basic usage
On the client, put a button at the end of your list.
```html
<button hx-get="/comments?page=2"
hx-swap="outerHTML"
hx-target="this">
Show more comments
</button>
```
When clicked, it extends the list (without any client-side state).
- [`hx-get`](https://four.htmx.org/reference/attributes/hx-get) requests `/comments?page=2`.
- [`hx-swap`](https://four.htmx.org/reference/attributes/hx-swap)=[`"outerHTML"`](https://four.htmx.org/reference/attributes/hx-swap#outerhtml) sets the strategy to replace the target.
- [`hx-target`](https://four.htmx.org/reference/attributes/hx-target)=[`"this"`](https://four.htmx.org/reference/attributes/hx-target#this) sets the target to itself.
On the server, respond with the next items plus a button pointing to `?page=3`:
```html
<div class="comment">...</div>
<div class="comment">...</div>
<div class="comment">...</div>
<!-- When there are no more pages, just omit this button -->
<button hx-get="/comments/?page=3"
hx-swap="outerHTML"
hx-target="this">
Show more comments
</button>
```
Because [`outerHTML`](https://four.htmx.org/reference/attributes/hx-swap#outerhtml) replaces the old button, the new one takes its place.
On the server, respond with the next items plus a button pointing to ?page=3:
<div class="comment">...</div><div class="comment">...</div><div class="comment">...</div><!-- When there are no more pages, just omit this button --><button hx-get="/comments/?page=3" hx-swap="outerHTML" hx-target="this"> Show more comments</button>
Because outerHTML replaces the old button, the new one takes its place.