jQuery replaceAll() method

The replaceAll() method in jQuery replaces the selected elements with new HTML elements. This method replaces the elements and their contents with other HTML elements. It returns the selected elements with new content.

Syntax

The commonly used syntax of the replaceAll() method is given as follows.

Parameter values

content: It is the mandatory parameter that specifies the content to insert. It must be HTML tags.

selector: It is also the mandatory parameter. It specifies the content required to be replaced. It can be the tag name, id or class name.

Let's see some examples to understand the use of the replaceAll() method.

Example1

In this example, there are two div elements, a paragraph element, and a button on which we are applying the replaceAll() method.

After clicking the button, 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 paragraph element with some content.

<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() 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 replaceAll() 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() {
$("<h1> Hello world :) </h1>").replaceAll("#d1");
$("<h2> Welcome to the javaTpoint.com </h2>").replaceAll("#d2");
$("<p> This is a paragraph element </p>").replaceAll("#p1");
$("<p> This is another paragraph element </p>").replaceAll("#btn");
});
});
</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 -

Example2

In this example, there are some paragraph elements and a button. We are replacing all given paragraphs and their contents with the heading h2 and its content. We have to click the given button to replace the paragraphs with heading.

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


<style>
h2{
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<p> This is an example of using the jQuery replaceAll() method. </p>
<p> This is a paragraph element </p>
<p> This is another paragraph element. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("<h2> Hello world :) </h2>").replaceAll("p");
});
});
</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 -

Example3

In this example, we using the replaceAll() method to replace the first div element, which is the first child of the body element.

<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
h2{
background-color: yellow;
color: blue;
}
div{
border: 2px solid blue;
}
</style>
</head>
<body>
<div>
<h3> This is heading h3. </h3>
<h3> This is another heading h3. </h3>
</div>
<br>
<div>
<p> This is first paragraph element. </p>
<p> This is another paragraph element. </p>
</div>
<p> Click the following button to replace the first div element. </p>
<button id = "btn"> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("<h2> Hello world :) </h2>").replaceAll("div:first-child");
});
});
</script>
</body>
</html>

Test it Now

Output

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