replaceAll()?.replaceAll(target) replaces each target element with the matched set (since jQuery 1.2). Content comes first; the target is the argument — the reverse of .replaceWith().
$("<b>Paragraph.</b>").replaceAll("p")
$("<h2>New heading</h2>").replaceAll(".inner")
$(".first").replaceAll(".third") // move existing node
// same DOM result, reversed syntax:
$("p").replaceWith("<b>Paragraph.</b>")
// replaces the whole element — not just inner HTML| Need | Use |
|---|---|
| Content first, replace targets | $(content).replaceAll(target) |
| Target first | $(target).replaceWith(content) |
| Change inside only | .html() |
| Delete without replacement | .remove() |
replaceAll()Build or select the replacement, pass the target(s), swap them out.
.replaceAll(target) — each target is swapped for the content.| Piece | Required? | Role |
|---|---|---|
| jQuery collection | Yes | Replacement content |
target | Yes | Element(s) to replace |
| Return | — | Inserted replacement set |
content = matched elements (or new HTML nodes)
targets = resolve(target)
for each t in targets:
remove t (and its data/events)
if first target:
move content into t's place
else:
clone content into t's place
return inserted replacements
// Same idea as .replaceWith(), reversed syntax:
// content.replaceAll(target) ≡ target.replaceWith(content)Keep these facts handy while swapping elements.
| Topic | Detail |
|---|---|
| Syntax | .replaceAll(target) |
| Since | jQuery 1.2 |
vs .replaceWith() | Content-first vs target-first |
| One target | Existing nodes move |
| Many targets | Clones after the first |
| Target cleanup | Data and events removed |
vs .html() | Whole element vs inner content |
Run official-style replaceAll actions on a tiny demo tree and see targets swap for new content.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Swap every <p> for a bold “Paragraph.” element.
// <p>Hello</p><p>cruel</p><p>World</p>
$("<b>Paragraph.</b>").replaceAll("p");<b> is created.p is selected for replacement..innerCreate a heading and replace every .inner element with it.
// <div class="container">
// <div class="inner first">Hello</div>
// <div class="inner">And</div>
// <div class="inner third">Goodbye</div>
// </div>
$("<h2>New heading</h2>").replaceAll(".inner");h2..inner divs match.Use one existing element as the replacement for another — it moves.
// Start: .first Hello, middle And, .third Goodbye
$(".first").replaceAll(".third");
// Result: And, then Hello (moved) — .third is gone$(".first") is the Hello block..third is removed.replaceAll vs replaceWithSame swap; pick content-first or target-first syntax.
// Content first
$("<strong>Done</strong>").replaceAll("#status");
// Target first — same DOM result
$("#status").replaceWith("<strong>Done</strong>");replaceAll reads well when the new node is ready.replaceWith reads well when the old node is selected.#status is removed; <strong> takes its place.Create the node, set text safely, then replace — avoids injecting raw HTML.
var label = "Hello <user>";
$("<p>").text(label).replaceAll("#msg");
// Result: <p>Hello <user></p> — tags shown as text$("<p>") creates a paragraph without HTML content..text(label) escapes < so it is not markup.#msg is swapped for the new paragraph.$("<…>").Check these before swapping nodes in real pages.
Handlers on replaced nodes are cleared. Tear down carefully if you need custom cleanup.
Existing replacements leave their old spot. Multiple targets clone after the first.
To change only contents, use .html().
Prefer .text() for user strings when building replacement nodes.
.replaceAll() is a core jQuery method (since 1.2). It needs a browser DOM with jQuery loaded.
Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery. Not for Node.js without a DOM.
Bottom line: Use .replaceAll(target) in the browser for content-first element swaps. Prefer .replaceWith() when the target is already selected.
| Approach | Cost | Best for |
|---|---|---|
.replaceAll(one) | Low | Single element swap / move |
.replaceAll(many) | Higher | Clones per extra target |
.html() | Often lower | Updating inside a kept shell |
Prefer one clear replace over many tiny swaps in a loop. If you only need new inner content, .html() is usually cheaper.
.replaceWith().One line: $(content).replaceAll(target) swaps targets for content — content-first twin of .replaceWith().
Learn the target-first syntax that performs the same replacement.
9 people found this page helpful