jQuery wrap() Method

jQuery wrap() method wraps an HTML structure (element's) around each selected elements.

Syntax

Here is a wrap() method syntax

$(selector).wrap( wrappingElement, function(index) );
Parameter Type Description
wrappingElement Selector
htmlString
Element
jQuery
Required. Specifies the HTML structure to wrap around each matched element.
function(index) Function Optional. Specifies the callback function that returning the wrapping element.
  • index - Return the index position of the element in the set as an argument.

Example

Here, in this example selected element wraps into <div> element.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery wrap() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").wrap("<div></div>");
      });
    });
  </script>
  <style type="text/css">
    div{
      background-color: pink;
      border:1px dashed black;
      text-align: center;
    }
  </style>
</head>
<body>
  <p>First paragraph text</p>
  <br />
  <p>Second paragraph text</p>
  <br />
  <button>Click here to call wrap() method</button>
</body> 
</html>

Run it...   »