jQuery replaceWith() Method

jQuery replaceWith() Method

The jQuery replaceWith() method replaces selected elements with new content.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery replaceWith() Method</h1> <p>This is a paragraph</p> <p>This is a paragraph</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p:first").replaceWith("<p>Hello jQuery</p>"); }); }); </script> </body> </html>

Syntax

$(selector).replaceWith(str); // or $(selector).replaceWith(func);

Parameter Values

ValueExplanation
strSpecifies the content to insert
str can be a htmlString.
funcSpecifies a function that returns the content to replace

replaceWith() using Function

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery replaceWith() Method</h1> <p>This is a paragraph</p> <p>This is a paragraph</p> <button>Click Me</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p:first").replaceWith(function(){ return "<p>Hello jQuery</p>"; }); }); }); </script> </body> </html>

Reminder

Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in jQuery.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author