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... »