jQuery | wrapInner() with Examples
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:
Please Login to comment...