jQuery replaceWith() Method

Quiz

The replaceWith() method is used to replace each element in a set of matched elements with the specified new content. In other words, It removes the matched elements from the DOM and inserts the new content in their place.

The replaceWith() method can be chained with other jQuery methods.

Syntax

Following is the syntax of replaceWith() method in jQuery −

$(selector).replaceWith(content,function(index))

Parameters

This method accepts the following parameters −

content: The content to insert. It can be HTML, a jQuery object, or DOM elements.
function(index): A function that returns the content to replace the selected element with.
index: This is the position of the element in the set of matched elements.

Example 1

In the following example, we are using the replaceWith() method to replace the paragraph element with a new heading element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function(){
                $("p").replaceWith("<h2>Replaced with a heading.</h2>");
            })
        });
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <button>Click to replace</button>
</body>
</html>

When we click the button, the new heading element will be replaced with the selected paragraph element.

Example 2

In this example, we are replacing an item in the list using the replaceWith() method −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function(){
                $(".item").replaceWith("<li>Replaced item</li>");
            })
        });
    </script>
</head>
<body>
    <ul>
        <li class="item">Item 1</li>
        <li>Item 2</li>
    </ul>
    <button>Click to replace</button>
</body>
</html>

After clicking the button, replaceWith() will be triggered and the new list item will be replaced with the existing list item with class named âitemâ.

Example 3

Here, we are using the optional function parameter to replace each paragraph elements with a new âdivâ element that includes a message indicating the original paragraph's position (index number) and content −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function(){
                $("p").replaceWith(function(index, oldHtml) {
                return "<div>Replaced paragraph " + (index + 1) + ": " + oldHtml + "</div>";
            });
            })
        });
    </script>
</head>
<body>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <p>This is the third paragraph.</p>
    <button>Click to replace</button>   
</body>
</html>

After executing the above program, all the paragraph elements will be replaced with a new div element indicating the index position of the paragraph elements.

jquery_ref_html.htm

Print Page