jQuery | replaceWith() with Examples
The replaceWith() method is an inbuilt method in jQuery which is used to replace the selected element with the new one.
Syntax:
$(selector).replaceWith(content, function)
Parameters: This method accepts two parameters as mentioned above and described below:
- content: It is required parameter which is used to specify the content need to replace.
- para2: It is an optional parameter which perform after calling.
Return Value: This method returns the selected element with the change.
Below codes illustrate the replaceWith() method in jQuery:
Example 1:
<!DOCTYPE html> <html> <head> <title>The replaceWith method</title> <script src= </script> <style> button { display: block; margin: 10px; color: red; width: 200px; padding: 3px; } div { color: green; border: 2px solid green; width: 200px; margin: 3px; padding: 5px; font-size: 20px; text-align: center; } </style> </head> <body> <!-- click on individual button and see the change --> <button>Geeks</button> <button>for</button> <button>Geeks</button> <!-- jQuery code to show the working of this method --> <script> $("button").click(function() { $(this).replaceWith("<div>" + $(this).text() + "</div>"); }); </script> </body> </html> |
Output:
Before click on any button:
After click on all button:
Example 2: In the code below optional function is passed.
<!DOCTYPE html> <html> <head> <title>The replaceWith method</title> <script src= </script> <style> button { display: block; margin: 4px; color: green; width: 150px; padding: 5px; } div { width: 200px; height: 100px; padding: 20px; border: 2px solid green; } </style> </head> <body> <div> <p>Welcome to </p> <!-- click on this button and see the change --> <button>Click Here!</button> </div> <!-- jQuery code to show the working of this method --> <script> var x = "GeeksforGeeks!"; $("button").click(function() { $("p").replaceWith(x).replaceWith(function(n) { alert("Click ok and string will replace"); return n; }); }); </script> </body> </html> |
Output:
