Search code examples
javascripthtmlhtmx

Replacing entire body using HTMX

I have the following index.html

<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body id="bomb-main" class="main-page">
<div class="bomb"
     hx-trigger="click"
     hx-swap="outerHTML"
     hx-target="#bomb-main"
     hx-get="/boom">💣</div>
</body>
</html>

/boom returns the following response

<body id="bomb-main" class="bomb-animation">
<h1>ka-boom</h1>
</body>

On clicking 💣, the body is replaced but the class remains same.

<body id="bomb-main" class="main-page">
<h1>ka-boom</h1>
</body>

How to change the class of the body?

Solution

  • It's not possible to replace the body element. htmx converts the outerHTML to innerHTML swap value. See the notes on hx-swap documentation

    Due to DOM limitations, it’s not possible to use the outerHTML method on the <body> element. htmx will change outerHTML on <body> to use innerHTML