Open In App

jQuery wrap() Method

Last Updated : 10 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 a required parameter that is used to specify the element to wrap around the selected elements.
  • function: It is an optional parameter that 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 the wrap() method.

The below examples illustrate the wrap() method in jQuery:

Example 1: This example does not accept optional parameters.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>The wrap() Method</title>
    <script src=
    </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:

jquery-46

Example 2:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>The wrap Method</title>
    <script src=
    </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-47



Previous Article
Next Article

Similar Reads

How to Wrap an Element with Another Div Using jQuery?
We will see how to wrap an element with another div in jQuery. We will simply wrap an element inside a div tag in jQuery. These are the following approaches: Table of Content Using wrap() method Using wrap.inner() methodApproach 1: Using wrap() method We include the jQuery library in the &lt;head&gt; section.We have a &lt;div&gt; with the ID elemen
3 min read
How to wrap setTimeout() method in a promise ?
To wrap setTimeout in a promise returned by a future. We can wrap setTimeout in a promise by using the then() method to return a Promise. The then() method takes up to two arguments that are callback functions for the success and failure conditions of the Promise. This function returns a promise. There can be two different values if the function ca
2 min read
Collect.js wrap() Method
The wrap() method in collect.js is used to wrap a particular set of values in a collection. Installation: In NodeJs:npm install collect.jsCDN for collect.js&lt;script src="https://cdnjs.com/libraries/collect.js"&gt;&lt;/script&gt; Syntax: wrap( object ); Parameters: This method accepts an array or object. Return Value: It returns the object. Exampl
1 min read
Lodash _.wrap() Method
Lodash _.wrap() method of Function in lodash is used to create a function that delivers value to the stated wrapper like its initial argument. Moreover, any further arguments delivered to the function are added to those which are delivered to the stated wrapper. Note:The wrapper used here is called the binding of the function formed. Syntax:_.wrap(
2 min read
What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break: break-all; It is used to break the words at any ch
2 min read
CSS word-wrap Property
The word-wrap property in CSS is used to break long words and wrap them into the next line. It defines whether to break words when the content exceeds the boundaries of its container. Syntax: word-wrap: normal|break-word|initial|inherit; Property Value: normal: It is the default value, The lines can only be broken at normal break points (spaces, no
1 min read
HTML | DOM Textarea wrap Property
The DOM Textarea wrap Property is used to set or return the value of the wrap attribute of the textarea. It describes the way the text to be wrapped while submitting a form. Syntax: It is used to return the wrap property.textareaObject.wrapIt is used to set the wrap property.textareaObject.wrap = soft|hard Property Values: soft: It defines that the
2 min read
HTML | wrap Attribute
The wrap attribute is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted. The wrap attribute can be applied on the &lt;textarea&gt; element: Supported Tags: &lt;Textarea&gt; Attribute Values: soft: This is a default value. It specifies that the Text present in the Textarea would not be wrapped aft
1 min read
HTML | &lt;textarea&gt; wrap Attribute
The HTML textarea wrap Attribute is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted. Syntax: &lt;textarea wrap="soft|hard"&gt; Attribute Values: soft: It specifies that the Text present in the Textarea would not be wrapped after submitting the form. This is the default value.Hard: It specifies
1 min read
How to wrap text around circular carousel in Bootstrap 4 ?
Wrapping up a circular carousel is quite hectic compare to wrapping up a circular image or any shape of the image. In this article first, we have to create a carousel to make that circular, then we can use the text to wrap the carousel. First, you have to create Bootstrap Carousel. To make that carousel circular you can use CSS border-radius proper
2 min read