Prev Next

jQuery ReplaceWith

The jQuery replaceWith() method replaces selected elements in the DOM with new content. It can be used to dynamically update or replace elements without removing their associated event handlers or data.

Key Topics

Basic Usage of replaceWith()

The replaceWith() method replaces the selected elements with the provided content.

$("#element").replaceWith("<div>New Content</div>");

Explanation: This code replaces the element with the ID element with a new <div> containing the text "New Content".

Dynamic Replacement

You can use replaceWith() in combination with events to dynamically replace elements based on user interactions.

$(".btn-replace").click(function() {
    $("#toReplace").replaceWith("<p>Content Replaced!</p>");
});

Explanation: This code listens for a button click event and replaces the element with the ID toReplace with a new <p> element.

Example: Using replaceWith()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery ReplaceWith Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="toReplace">Original Content</div>
    <button class="btn-replace">Replace Content</button>

    <script>
        $(document).ready(function() {
            $(".btn-replace").click(function() {
                $("#toReplace").replaceWith("<div>New Content Added</div>");
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates how to replace an element dynamically using replaceWith(). When the button is clicked, the content of the element is replaced.

Key Takeaways

  • Dynamic Updates: Use replaceWith() to replace elements dynamically based on events or conditions.
  • Efficient Replacement: Simplifies replacing elements without manually removing and adding DOM elements.
  • Interactive UI: Ideal for creating interactive user interfaces where content changes dynamically.
Prev Next