diff --git a/src/htmx.js b/src/htmx.js index e6868ba2..471a6628 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -512,15 +512,22 @@ return (function () { swapStyle = oobValue; } - var target = getDocument().querySelector(selector); - if (target) { - var fragment; - fragment = getDocument().createDocumentFragment(); - fragment.appendChild(oobElement); // pulls the child out of the existing fragment - if (!isInlineSwap(swapStyle, target)) { - fragment = oobElement; // if this is not an inline swap, we use the content of the node, not the node itself - } - swap(swapStyle, target, target, fragment, settleInfo); + var targets = getDocument().querySelectorAll(selector); + if (targets) { + forEach( + targets, + function (target) { + var fragment; + var oobElementClone = oobElement.cloneNode(true); + fragment = getDocument().createDocumentFragment(); + fragment.appendChild(oobElementClone); + if (!isInlineSwap(swapStyle, target)) { + fragment = oobElementClone; // if this is not an inline swap, we use the content of the node, not the node itself + } + swap(swapStyle, target, target, fragment, settleInfo); + } + ); + oobElement.parentNode.removeChild(oobElement); } else { oobElement.parentNode.removeChild(oobElement); triggerErrorEvent(getDocument().body, "htmx:oobErrorNoTarget", {content: oobElement}) diff --git a/test/attributes/hx-swap-oob.js b/test/attributes/hx-swap-oob.js index 559849d2..0a1b5880 100644 --- a/test/attributes/hx-swap-oob.js +++ b/test/attributes/hx-swap-oob.js @@ -92,5 +92,31 @@ describe("hx-swap-oob attribute", function () { byId("d1").innerHTML.should.equal("Swapped"); }) + it('swaps into all targets that match the selector (innerHTML)', function () { + this.server.respondWith("GET", "/test", "