jQuery replaceWith() method

The replaceWith() method in jQuery is used to replace the selected elements with the new one. This method replaces the matched elements with the specified HTML elements. It returns the replaced elements. This method is similar to the replaceAll() method.

Syntax

Parameter values

The parameter values of the replaceWith() method are defined as follows.

newContent: It is a required parameter. It is the content to replace the selected elements. It can be HTML elements, DOM elements, or jQuery objects.

function(index): It is an optional parameter. It is the function that returns the content to replace. It includes an argument index. The index argument is used to return the element's index position.

Let's see some examples to understand how to use the replaceWith() method.

Example1

In this example, there are two div elements, a paragraph element, and a button on which we are applying the replaceWith() method. Here we are using the newContent parameter of the replaceWith() method.

After clicking the button, the div element with id = "d1" gets replaced with the heading h1, and the div element with id = "d2" gets replaced with the heading h2. The text of paragraph element with id = "p1" gets replaced with the new content, and the button with id = "btn" gets replaced with a new div element with id = "d3".

<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceWith() method </title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>


<style>
div {
border: 2px dashed blue;
width: auto;
margin: 8px;
font-size: 23px;
text-align: center;
}
h1, h2{
background-color: yellow;
color: blue;
}
#d3{
border: 2px solid blue;
width: 150px;
height: 15px;
}
</style>
</head>
<body>
<p> This is an example of using the jQuery replaceWith() method. </p>
<div id = "d1"> This is a div element </div>
<div id = "d2"> This is another div element. </div>
<p id = "p1"> Click the following button to see the effect </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("#d1").replaceWith("<h1> Hello world :) </h1>");
$("#d2").replaceWith("<h2> Welcome to the javaTpoint.com </h2>");
$("#p1").replaceWith("<p> This is a paragraph element </p>");
$("#btn").replaceWith("<div id = 'd3'> </div>");
});
});
</script>

</body>
</html>

Test it Now

Output:

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Now, in the next example, we will use the function(index) parameter of the replaceWith() method.

Example2

In this example, there are some paragraph elements and some div elements. We are applying the replaceWith() method on all div elements and on the paragraph elements with class = "para". After clicking the given button, the paragraph elements with corresponding class gets replaced with the heading h4 and the div elements gets replaced with the heading h3.

Here, we are using the function(index) parameter of the replaceWith() function. In the output we can see the index position of the elements.

<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceWith() method </title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<style>
div {
border: 2px dashed blue;
width: auto;
margin: 8px;
text-align: center;
}
h3{
background-color: yellow;
color: blue;
}

</style>
</head>
<body>
<p> This is an example of using the jQuery replaceWith() method. </p>
<div> This is a div element </div>
<p class = "para"> This is a paragraph element </p>
<div> This is another div element </div>
<p class = "para"> This is another paragraph element </p>
<p class = "para"> Click the following button to see the effect </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".para").replaceWith(function(index){
return "<h4> This is a paragraph element with index: " + index + ".</h4>";
});
$("div").replaceWith(function(index){
return "<h3> This is a div element with index: " + index + ".</h3>";
});

});
});

</script>

</body>
</html>

Test it Now

Output:

After the execution of the above code, the output will be -