jQuery wrapInner() Method

jQuery wrapInner() method wraps an HTML structure around the inner content (innerHTML) of each selected element.

Syntax

Here is a wrapInner() method syntax

$(selector).wrapInner( wrappingElement, function(index) );
Parameter Type Description
wrappingElement Selector
htmlString
Element
jQuery
Required. Specifies the HTML structure to wrap around the inner content of each matched elements.
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 HTML structure wrap around the inner content.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery wrapInner() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").wrapInner("<u></u>");
      });
    });
  </script>
</head>
<body>
  <p>First paragraph text</p> 
  <p>Second paragraph text</p>
  <br />
  <button>Click here to call wrapInner() method</button>
</body> 
</html>

Run it...   »