jQuery provides replaceWith() method to replace existing HTML content with a new content in a given HTML document.
jQuery replaceWith() Method
The jQuery replaceWith() method removes the content from the DOM and inserts a new content in it’s place.
Following is the syntax of the replaceWith() method:
$(selector).replaceWith(newContent);
The replaceWith() method removes all data and event handlers associated with the removed nodes.
Synopsis
Consider the following HTML content:
<div class="container"> <h2>jQuery replaceWith() Method</h2> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> <div class="hello">Hello</div> </div>
Now if we apply the replaceWith() method as follows:
$( ".hello" ).replaceWith("<h2>New Element</h2>" );
It will produce following result:
<div class="container"> <h2>jQuery remove() Method</h2> <h2>New Element</h2> <div class="goodbye">Goodbye</div> <h2>New Element</h2> </div>
If we had any number of nested elements inside <div class=”hello”>, they would be removed, too.
Example
Let’s try the following example and verify the result:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$( ".hello" ).replaceWith("<h2>New Element</h2>" );
});
});
</script>
</head>
<body>
<div class="container">
<h2>jQuery replaceWith() Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
<div class="hello">Hello</div>
</div>
<br>
<button>Replace Element</button>
</body>
</html>
Example
Following example replace all paragraphs with Brilliant.
<!doctype html>
<html lang="en">
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$( "p" ).replaceWith( "<b>Brilliant</b>" );
});
});
</script>
</head>
<body>
<h2>jQuery replaceWith() Method</h2>
<p>Zara</p>
<p>Nuha</p>
<p>Ayan</p>
<button>Replace Element</button>
</body>
</html>