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);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.wisdom.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.wisdom.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>
Leave a Reply