jQuery wrapInner() Method
Last Updated : 11 Jul, 2025
The wrapInner() method is an inbuilt method in jQuery that is used to wrap HTML elements 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 a mandatory parameter and used to specify the HTML element to wrap around the content of the selected element
- function: It is an optional parameter and is used to specify the function that returns the wrapping element.
- index: It returns the index of the element.
Return Value: This method returns the selected element with the applied changes.
The below examples illustrate the wrapInner() method in jQuery:
Example 1: this example does not contain an optional parameter.
html <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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:
Example 2:
html <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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:
Related Articles: