The wrapInner() method is an inbuilt method in jQuery which is used to wrap HTML element around the content of each selected element.
Syntax:
$(selector).wrapInner(wrap_element, function(index))
Parameters: This function accepts two parameters as mentioned above and described below:
- wrap_element: It is mandatory parameter and used to specify the HTML element to wrap around the content of the selected element
- function: It is optional parameter and used to specify the function that returns the wrapping element.
- index: It returns the index of element.
Return Value: This method returns the selected element with the applied changes.
Below examples illustrate the wrapInner() method in jQuery:
Example 1: this example does not contains optional parameter.
<!DOCTYPE html> < html > < head > < script src = </ script > <!-- jQuery code to show the working of this method --> < script > $(document).ready(function() { $("div").click(function() { $(this).wrapInner("< b ></ b >").css( "background-color", "green"); }); }); </ script > < style > body { width: 200px; padding: 20px; height: 20px; border: 2px solid green; } </ style > </ head > < body > <!-- click on this div and see the change --> < div >Welcome to GeeksforGeeks!</ div > </ body > </ html > |
Output:
Before click on the div element:
After click on the div element:
Example 2:
<!DOCTYPE html> < html > < head > < script src = </ script > <!-- jQuery code to show the working of this method --> < script > $(document).ready(function() { $("div").click(function() { $("span").wrapInner(function(n) { return "< i ></ i >"; }); }); }); </ script > < style > body { width: 250px; padding: 20px; height: 20px; font-size: 20px; border: 2px solid green; } </ style > </ head > < body > <!-- click on this div and see the change --> < div >Welcome to < span >GeeksforGeeks!</ span ></ div > </ body > </ html > |
Output:
Before click on the div element:
After click on the div element:
Related Articles: