Updated April 19, 2023
Definition of jQuery replaceAll
jQuery replaceAll() function is used to replaces the each selected elements with the new HTML elements. The jQuery replaceAll() function is a built-in function in jQuery. These function replaces the selected elements along with their content with the specified other HTML elements along with its content and returns the matched set of selected elements with the new content.
Syntax:
$(content).replaceAll(selector);Parameters:
- content – This is not an optional parameter. It specifies the new HTML element and its content to be inserted by replacing the selected element. It must pass with the HTML tags.
- selector – This is also not an optional parameter. It specifies the old HTML element and its content to be replaced by the new HTML element. The selector can be tag name, id, or class.
- Return value – The return value of this function is the selected element with the new content.
Working of jQuery replaceAll() Function
The jQuery replaceAll() function replace the selected element by the new content. Suppose we have a div element in the HTML page that contains some content. Now we need to replace it by the h1 element along with some content, so we can use the replaceAll() function as $(“<h1> Hello </h1>”).replaceAll(“div”);”, which replace old div element by h1 element and return the h1 element along with its content.
Examples for the jQuery replaceAll() function –
Example of jQuery replaceAll() function to replace the all li elements content –
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery replaceAll() function </title>
<script>
function disp()
{
$( "<li> Will be added </li>" ).replaceAll( "li" );
}
</script>
</head>
<body>
<h3> An example for replaceAll() function: </h3>
<div>
<h2> The List of Vegetables are : </h2>
<ol>
<li> Corn </li>
<li> Mushroom </li>
<li> Broccoli </li>
<li> Cucumber </li>
<p> Some more vegetables will be add soon. </p>
</ol>
</div>
<div>
<h2> The List of Fruits are : </h2>
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Pome </li>
<p> Some more fruits will be adding soon. </p>
</ol>
</div>
<button onclick = "disp()"> Click here to replace all li elements content. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there are div elements that have “h2”, “ol”, and “li” as the children elements. Next the replaceAll() function is used to replace all the li elements content as “$( “<li> Will be added </li>” ).replaceAll( “li” ); ”, that replace old li elements content by new li elements content, we can see once we click on the button.
Example of jQuery replaceAll() function to replace the p elements by using an id –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery replaceAll() function </title>
<style>
#p1{
border : 2px solid red;
width : 200px;
height : 20px;
}
</style>
<script>
function disp()
{
$("<h1> This is a first heading. </h1>").replaceAll("#p1").css({
"background-color": "yellow",
"border": "2px dashed green"
});
}
</script>
</head>
<body>
<h3> This an example of replaceAll() function: </h3>
<div>
<p id = "p1" > This is a first paragraph. </p>
<span> This is a first span box. </span>
</div>
<p> This is a second paragraph. </p>
<span> This is a second span box. </span>
<br>
<button onclick = "disp()"> Click here to replace all p elements content. . </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there are “div” elements that have “p”, “span”, and “button” elements. Next, the replaceAll() function is used to replace all the elements of id “p1” with the heading content and apply some formatting style as “$(“<h1> This is a first heading. </h1>”).replaceAll(“#p1”).css({ “background-color”: “yellow”, “border”: “2px dashed green”});”.
Example of jQuery replaceAll() function to replace the multiple elements with its content –
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery replaceAll() function </title>
<script>
function replace()
{
$("<h1> This is a heading. </h1>").replaceAll("p, h3, span");
}
</script>
</head>
<body>
<h3> This an example of jQuery replaceAll() function: </h3>
<div>
<h3> This is a first heading and it is a child of div element. </h3>
<p> This is a first paragraph and it is a child of div element. </p>
<span> This is a first span box and it is a child of div element. </span>
</div>
<h3> This is a second heading and it is a sibling of div element. </h3>
<span> This is a second span box and it is a siblingof div element. </span>
<p> This is a second paragraph and it is a sibling of div element. </p>
<br>
<button onclick = "replace()"> Click here to replace multiple elements. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there are “p”, “h3” and “span” elements. Next, the replaceAll() function is used to replace multiple elements (“p”, “h3” and “span”) by “h1” element and its content as “$(“<h1> This is a heading. </h1>”).replaceAll(“p, h3, span”);” , So it replace all the elements by “h1” element, as we can see in the above output.
Conclusion
The jQuery replaceAll() function is a built-in function, which is used to replaces each selected elements with the new HTML elements.
Recommended Articles
This is a guide to jQuery replaceAll. Here we discuss the definition, syntax, working of the jQuery replaceAll() and examples with code implementation. You may also have a look at the following articles to learn more –
