Load More and Infinite Scroll

<ul id="posts">
  <li>Post 1</li><li>Post 2</li><li>Post 3</li>
  <li><button hx-get="/posts?page=2" hx-target="closest li" hx-swap="outerHTML">Load more</button></li>
</ul>

<!-- The pretend server: on a real site this part is your backend (Python, PHP, Node, Go...) -->
<script>
  server.get("/posts", (req) => {
    const page = Number(req.query.page);
    const items = [1, 2, 3].map((i) => `<li>Post ${(page - 1) * 3 + i}</li>`).join("");
    const more = page < 4
      ? `<li><button hx-get="/posts?page=${page + 1}" hx-target="closest li" hx-swap="outerHTML">Load more</button></li>`
      : "<li><em>That's everything.</em></li>";
    return items + more;
  });
</script>

<div style="height:180px;overflow:auto;border:1px solid #ccc">
  <p>Photo 1</p><p>Photo 2</p><p>Photo 3</p><p>Photo 4</p><p>Photo 5</p>
  <p hx-get="/photos?page=2" hx-trigger="intersect once" hx-swap="outerHTML">Loading more photos...</p>
</div>

<!-- The pretend server: on a real site this part is your backend (Python, PHP, Node, Go...) -->
<script>
  server.get("/photos", (req) => {
    const page = Number(req.query.page);
    let html = "";
    for (let i = 1; i <= 5; i++) html += `<p>Photo ${(page - 1) * 5 + i}</p>`;
    return html + (page < 5 ? `<p hx-get="/photos?page=${page + 1}" hx-trigger="intersect once" hx-swap="outerHTML">Loading more photos...</p>`
                            : "<p><em>No more photos.</em></p>");
  }, { delay: 500 });
</script>