jQuery Wrap and UnWrap Elements

jQuery Wrap and UnWrap Elements with Examples

In this article, I am going to discuss jQuery Wrap and UnWrap Elements with Examples. Please read our previous article, where we discussed jQuery DOM Manipulation Methods. At the end of this article, you will understand everything about jQuery Wrap Elements.

jQuery Wrap and UnWrap Elements

The following four jQuery methods are used to wrap and unwrap the HTML elements. As these methods are used to modify the DOM elements, they belong to the DOM manipulation category.

Wrap
Unwrap
wrapAll
wrapInner

jQuery wrap() method

The wrap() method is an inbuilt method in jQuery that is used to wrap the specified element around the selected element. Suppose you have a span element as follows <span>This is a text</span>, you want to wrap this element inside a div element like

<div>
<span>This is a text</span>
</div>

Then you have to use the jQuery wrap method.

Syntax: $(selector).wrap(element, function)

Parameters: This method accepts two parameters as follows:

element: It is a required parameter that is used to specify the element to wrap around the selected elements. Possible values are HTML elements, jQuery objects, DOM elements
function: It is an optional parameter that is used to specify the function which returns the wrapping element.

Example: jQuery wrap method

Let us understand the jQuery wrap method with examples. In the below example, we have an <div> element. And when we will click on the Click Me button the div element will be wrapped around an <section> element.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Wrap Elements</title>
</head>
<body>
    <h3>jQuery wrap Method</h3>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    </br>
    <button class="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".demo").click(function () {
          $("div").wrap("<section></section>");
        });
      });
    </script>
</body>
</html>

Now run the above code. Open the browser developer tool by pressing the F12 key and have a look at the Elements tab and you can see currently the div element is not surrounded by the section element.

Now, click on the Click Me button and observe that the div element is now surrounded by the section element as shown in the below image.

Another Example For Better Understanding:

In the below example, we have a collection of 3 <div> elements. Wrap() method is implicitly iterating over the collection i.e. iterating all the div elements in our example and wrapping all of them (i.e. all the div elements) inside the section element.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Wrap Elements</title>
</head>
<body>
    <h3>jQuery Wrap Method</h3>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    </br>
    <button class="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".demo").click(function () {
          $("div").wrap("<section></section>");
        });
      });
    </script>
</body>
</html>

Now run the above code and then open the browser developer tool by pressing the F12 key and have a look at the Elements tab and you can see currently all the div elements are not surrounded by the section element as shown in the below image.

Now, click on the Click Me button and observe that all the div elements are now wrapped with the section element as shown in the below image.

Example: jQuery wrap method using the optional callback function

In the below example, we are using the callback function which is accepting index no of the element currently iterating over as a parameter. We are wrapping the div elements in a loop i.e. 1^st div will be wrapped around <div class = “div0”></div> and 2^nd div element will wrapped around <div class = “div1”></div> and so on….

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Wrap Elements</title>
</head>
<body>
    <h1>jQuery Wrap Function</h1>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    </br>
    <button class="wrap">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".wrap").click(function () {
          $("div").wrap(function (index) {
            return `<div class="div${index}"></div>`;
          });
        });
      });
    </script>
</body>
</html>

Now run the above code and open the browser developer tool by pressing the F12 key and have a look at the Elements tab and you can see the div elements are not assigned with any class. Now, click on the Click Me button and again have a look at the div elements. Now, the div elements are assigned with the class div0, div1, and so on as shown in the below image.

jQuery Unwrap() method

The jQuery Unwrap method is used to remove the wrapper element from a specified element i.e. it deletes the immediate parent of any specified element.

Syntax: $(selector).unwrap()

Example: jQuery Unwrap Method

Let us understand the jQuery unwrap method with examples. In the below example; here we have a <p> tag which is descendant of <section> element. Again, we have two button elements.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Wrap Elements</title>
</head>
<body>
    <h3>jQuery unwrap Method</h3>
    <section>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
        veritatis ab fugiat ducimus, totam ratione quod
      </p>
    </section>
    </br>
    <button class="demo wrap">Wrap</button>
    <button class="demo unwrap">UnWrap</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".wrap").click(function () {
          $("p").wrap("<div class='div1'></div>");
        });
        $(".unwrap").click(function () {
          $("p").unwrap();
        });
      });
    </script>
</body>
</html>

Now run the above code and open the browser developer tool. When we click on the wrap button the <p> element is being wrapped by <div> which you can see in the elements tab as shown in the below image.

Now when you click on the unwrap button, the immediate parent of the <p> element i.e. <div> element will be removed and the section element becomes the immediate parent of the p element which you can see in the Elements tab as shown in the below image.

Now <div> is removed and <section> is the immediate parent of the <p> element. Again, click on the unwrap button, then the <section> element will also be removed which you can see in the Elements tab as shown in the below image.

jQuery wrapAll() method:

The jQuery wrapAll() method wraps specified HTML element(s) around all selected elements. The jQuery Wrap() method wraps specified HTML element(s) around each of the selected elements but wrapAll() method does it around all selected elements.

Syntax: $(selector).wrapAll(element, function)

Example: jQuery wrapAll() method

Let us understand the jQuery wrapAll() method with Examples. Please have a look at the below example.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Wrap Elements</title>
</head>
<body>
    <h3>jQuery WrapAll Method</h3>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
      veritatis ab fugiat ducimus, totam ratione quod
    </div>
    </br>
    <button class="demo wrap">WrapAll</button>
    <button class="demo unwrap">Unwrap</button>
    <button class="demo wrapall">WrapAll</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".wrap").click(function () {
          $("div").wrap("<div class='div1'></div>");
        });
        $(".unwrap").click(function () {
          $("div").unwrap();
        });
        $(".wrapall").click(function () {
          $("div").wrapAll("<div class='div1'></div>");
        });
      });
    </script>
</body>
</html>

Now run the above code and open the browser developer tool and have a look at the Elements tab. When we click on the wrap button each of the div elements is wrapped around an <div> of class ‘div1’.

Then when we click on the unwrap button all the selected <div> elements are unwrapped as shown in the below image.

And again, when you click on the wrapAll button, you will see that all the selected <div> elements will be wrapped under a single div of class ‘div1’ as shown in the below image.

jQuery wrapInner() Method

The wrapInner() method wraps specified HTML element(s) around the content (innerHTML) of each selected element. In the case of previously discussed methods, they are wrapping the whole elements. But the wrapInner method wraps the content of the element instead of wrapping the whole element.

Syntax: $(selector).wrapInner(element, function)

Example: jQuery wrapInner() method

In the below example, we have 3 <div> elements of class ‘div1’

  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }
   h1 {
     font-size: 40px;
     margin-bottom: 30px;
     padding: 30px;
   }

    .demo {
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 18px;
      margin-top: 20px;
      margin-right: 10px;
      border: 1px solid black;
      outline: none;
      transition: 3ms;
    }
    .demo:hover {
      background-color: #ddd;
      cursor: pointer;
    }
    div,p {
      display: block;
      font-size: 20px;
      margin: 35px;
      padding: 35px;
    }
  .div1 {
      background-color: rgb(120, 247, 247);
    }
  .div2 {
      background-color: rgb(106, 243, 158);
    }

 </style>
<body>
  <h1>jQuery Wrap Elements</h1>

  <div class="div1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
    veritatis ab fugiat ducimus, totam ratione quod
  </div>
  <div class="div1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
    veritatis ab fugiat ducimus, totam ratione quod
  </div>
  <div class="div1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
    veritatis ab fugiat ducimus, totam ratione quod
  </div>
  <button class="demo wrap">WrapAll</button>
  <button class="demo unwrap">Unwrap</button>
  <button class="demo wrapInner">WrapInner</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".wrap").click(function () {
        $("div").wrap("<div class='div2'></div>");
      });
      $(".unwrap").click(function () {
        $("div").unwrap();
      });
      $(".wrapInner").click(function () {
        $("div").wrapInner("<div class='div2'></div>");
      });
    });
  </script>
</body>

We have 3 <div> elements of class ‘div1’

Now click on the ‘wrap’ button. You will see that all the <div> elements of class ‘div1’ will be wrapped by <div> of class ‘div2’

If we click on the ‘unwrap’ button then those will be unwrapped

Now click on the ‘wrapInner’ button. You will see that content of the <div> elements of class ‘div1’ will be wrapped by <div> of class ‘div2’

In the next article, I am going to discuss jQuery Append and Prepend Elements with Examples. Here, in this article, I try to jQuery Wrap and UnWrap Elements with Examples and I hope you enjoy this jQuery Wrap and UnWrap Elements article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.