jQuery wrap() Method

Quiz

The wrap() method in jQuery is used to wrap an HTML structure around each element in a selected set of elements.

Note: If you want to wrap an HTML structure around all matched elements as a whole, wrapAll() is the appropriate method to use.

Syntax

Following is the syntax of the wrap() method in jQuery −

$(selector).wrap(wrappingElement,function(index))

Parameters

This method accepts the following parameters −

wrappingElement: It specifies what HTML element(s) to wrap around each selected element. The possible values could be: HTML elements, DOM elements, jQuery objects.
function (index): (optional) A function that is executed for each selected element.

Example 1

Using wrap() method with HTML element:

In the following exmaple, we are using the wrap() method to wrap each <p> element with a <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $('p').wrap('<div></div>').css({"border": "2px solid green"});
      });
    });
  </script>
</head>
<body>
   <p>Paragraph element.</p>
   <p>This is another Paragraph element.</p>
   <h3>Heading element.<h3>
<button>Click me!</button>
</body>
</html>

When we click the button, <div> element will be wrapped around each <p> element and highlighted with green solid border.

Example 2

Using wrap() method with DOM element:

This is similar to the first example, this one wraps each <p> element with a <div> element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        $("button").click(function(){
          $('p').wrap(document.createElement('div')).css({"border": "2px solid green"});
      });
    });
  </script>
</head>
<body>
    <p>Paragraph element.</p>
    <p>This is another Paragraph element.</p>
	<h3>Heading element.<h3>
    <button>Click me!</button>
</body>
</html>

After clicking the button, <div> element will be wrapped around each <p> element and highlighted with green solid border.

Example 3

Using wrap() method with jQuery object:

Here, we are wrapping each <p> element with a <div> element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        $("button").click(function(){
          $('p').wrap($('<div></div>')).css({"border": "2px solid green"});
        });
      });
  </script>
</head>
<body>
    <p>Paragraph element.</p>
    <p>This is another Paragraph element.</p>
	<h3>Heading element.<h3>
    <button>Click me!</button>
</body>
</html>

After clicking the button, <div> element will be wrapped around each <p> element and highlighted with green solid border.

Example 4

Using wrap() method with callback function:

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        $("button").click(function(){
          $('p').wrap(function(index){
              return '<div></div>';
          }).css({"border": "2px solid green"});
        });
      });
  </script>
</head>
<body>
   <p>This is a Paragraph element.</p>
   <p>This is another Paragraph element.</p>
   <h3>Heading element.<h3>
<button>Click me!</button>
</body>
</html>

So, when the button is clicked, each <p> element is wrapped with a <div> element, and the wrapped elements will be highlighted with a green border.

jquery_ref_html.htm

Print Page