Replacing Elements
In this page:
replaceWith()
The replaceWith() method swaps the selected element out entirely for new content, removing the original from the DOM. The replacement takes the exact position the original element occupied.
Example: replaceWith()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="old">Old content</span>
<script>
$("#old").replaceWith("<div>New content</div>");
</script>
</body>
</html>replaceAll()
replaceAll() works the other way around from replaceWith(): you call it on the new content and pass a selector for the target elements to replace. It's functionally equivalent, just with the caller and argument reversed.
Example: replaceAll()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="old">Old content</span>
<script>
$("<div>New content</div>").replaceAll("#old");
</script>
</body>
</html>Replace with Existing Element
A replacement can use an existing DOM element instead of a fresh HTML string, in which case that element is moved into the new position rather than cloned. Since elements can't exist in two places, the original position of the moved element is left empty.
Example: Replace with Existing Element
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="template">Template</div>
<span id="old">Old</span>
<script>
$("#old").replaceWith($("#template"));
</script>
</body>
</html>Replace Text
Replacing an element can also change its structure entirely, not just its text -- for example, swapping a span for a whole div with different children. This is different from just changing text content, since the element type itself changes.
Example: Replace Text
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="badge">Info</span>
<script>
$("#badge").replaceWith("<div class='alert'>Warning: check this</div>");
</script>
</body>
</html>Replacing Carefully
Replacing an element removes the old element and its event handlers permanently, so any listeners bound directly to it stop working. If you need to preserve behavior across a replace, rebind handlers on the new content after the swap.
Example: Replacing Carefully
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="old">Old Button</button>
<script>
const $new = $("<button id='old'>New Button</button>");
$new.on("click", function() { console.log("Rebinding works"); });
$("#old").replaceWith($new);
</script>
</body>
</html>Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: