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:
leave a comment
0 Comments