The problem: swapping part of a page is harder than it should be
You click a "Load more" button. Behind the scenes, your app fetches some HTML and shoves it into a Except it never stays simple. You hit edge cases with orphaned event listeners, focus jumping around, scripts that mysteriously don't execute, and weird flashes when you replace a chunk of DOM. I ran into this again last month while refactoring a dashboard. The team had jQuery doing partial swaps for the better part of a decade and finally wanted out. The "modern" alternatives all looked great in demos. Each one came with its own quirks. HTML, at its core, doesn't have a primitive for "replace this region with the contents of that response." You can navigate the whole page ( That gap is why entire categories of tools exist: Each of them is solving a problem the browser itself never tried to solve. Here's the typical "just fetch and replace" approach: Looks fine. But:Why the web makes this awkward
, ), or you can call fetch() and write the result into innerHTML yourself. There's no middle ground built into the platform.A quick tour of the pain
// Replace #content with HTML from the server
async function loadFragment(url) {
const res = await fetch(url);
const html = await res.text();
document.querySelector('#content').innerHTML = html;
}