jQuery | wrap() with Examples

13 Feb, 2019
The wrap() method is an inbuilt method in jQuery which is used to wrap the specified element around the selected element.
Syntax:
$(selector).wrap(element, function)
Parameters: This method accepts two parameters as mentioned above and described below:
element: It is required parameter which is used to specify the element to wrap around the selected elements.
function: It is optional parameter which is used to specify the function which returns the wrapping element.
Return Value: This method returns the selected element with the specified changes made by wrap() method.
Below examples illustrate the wrap() method in jQuery:
Example 1: This example does not accept optional parameter.
<!DOCTYPE html><html>    <head>        <title>The wrap() Method</title>        <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() {                $("button").click(function() {                    $("p").wrap("<div></div>");                });            });        </script>        <style>            div {                background-color: lightgreen;                padding: 20px;                width: 200px;                font-weight: bold;                height: 60px;                border: 2px solid green;            }        </style>    </head>           <body>        <!-- click on this paragraph and see the change -->        <p>Welcome to GeeksforGeeks!</p><br>        <button>Click Here!</button>    </body></html>
Output:
Example 2:
<!DOCTYPE html><html>    <head>        <title>The wrap Method</title>        <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() {                $("button").click(function() {                    $("p").wrap(function() {                        return "<div></div>"                    });                });            });        </script>        <style>            div {                background-color: lightgreen;                padding: 20px;                width: 200px;                font-weight: bold;                height: 60px;                border: 2px solid green;            }        </style>    </head>    <body>        <!-- click on this paragraph and see the change -->        <p>Welcome to GeeksforGeeks!</p><br>        <button>Click Here!</button>    </body></html>
Output:
jQuery-HTML/CSS
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to add options to a select element using jQuery?
jQuery | children() with Examples