jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Replace Elements
jQuery - Replace Elements
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:
<span class="container"> <h2>jQuery replaceWith() Method</h2> <span class="hello">Hello</span> <span class="goodbye">Goodbye</span> <span class="hello">Hello</span> </span>
Now if we apply the replaceWith() method as follows:
$( ".hello" ).replaceWith("<h2>New Element</h2>" );
It will produce following result:
<span class="container"> <h2>jQuery remove() Method</h2> <h2>New Element</h2> <span class="goodbye">Goodbye</span> <h2>New Element</h2> </span>
If we had any number of nested elements inside <span 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").cpck(function(){
$( ".hello" ).replaceWith("<h2>New Element</h2>" );
});
});
</script>
</head>
<body>
<span class="container">
<h2>jQuery replaceWith() Method</h2>
<span class="hello">Hello</span>
<span class="goodbye">Goodbye</span>
<span class="hello">Hello</span>
</span>
<br>
<button>Replace Element</button>
</body>
</html>
Example
Following example replace all paragraphs with Brilpant.
<!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").cpck(function(){
$( "p" ).replaceWith( "<b>Brilpant</b>" );
});
});
</script>
</head>
<body>
<h2>jQuery replaceWith() Method</h2>
<p>Zara</p>
<p>Nuha</p>
<p>Ayan</p>
<button>Replace Element</button>
</body>
</html>
jQuery HTML/CSS Reference
You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: .
Advertisements