The jQuery wrapInner() method can be used to wrap the inner content of selected elements with the wrapping element. You have to specify the HTML wrapping element to wrap around the content of the elements.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The above syntax contains two parameters to use the method. The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to wrap the inner content using the method. You have to use tag name, class name, or id of the elements to select. It is a required field. |
| htmlwrappingElement | It is the HTML element to wrap around the inner content of the elements. It is a required field. |
jQuery wrapInner() Method to Wrap Inner Content of an Element
If you want to wrap the inner content of the selected element, you have to use this method. The below example contains 2 paragraphs with content. The method wraps the inner content of the paragraph.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.wrapbtn').click(function(){ $("p").wrapInner("<em></em>"); }); }); </script> <p>First paragraph.</p> <p>Second paragraph.</p><br> <button type="button" class="wrapbtn">Click to Wrap</button> |
Output
First paragraph.
Second paragraph.
You have to click the button given above to wrap the content of the element. The element wrapped with the HTML em element to make it italic.
Using Function Wrap Inner Content
You can also use the function to wrap the inner content of the selected element. Use the jQuery wrapInner() method as given in the example below.
Example
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $('.wrapfnbtn').click(function(){ $("p").wrapInner(function(){ return "<sup></sup>" }); }); }); </script> <p class="myfnpara">This is my paragraph.</p><br> <button type="button" class="wrapfnbtn">Click to Wrap</button> |
Output
This is my paragraph.
When you click the button above, it makes the content small using the HTML sup element. The selected element got wrapped with the specified HTML element using the function.
You may also like to read
I hope you like this tutorial on jQuery wrapInner() method. If you have any queries regarding the tutorial, please comment below.
References