wrapInner()

The jQuery wrapInner() method is used to wrap an HTML structure around the content of each element in the set of matched element. This method can accept any string or object that could be passed to the $() factory function.

Syntax:

snippet

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

Parameters of jQuery wrapInner() method

Parameter	Description
wrappingElement	It is a mandatory parameter. It specifies what HTML elements are to be wrapped around the content of each selected element. Its possible values are: HTML elements jQuery objects DOM elements
Function(index)	It is an optional parameter. It specifies a function that returns the wrapping element. Index:It provides the index position of the element in the set.

Example of jQuery wrapInner() method

Let's take an example to demonstrate the jQuery wrapInner() method.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner("<em></em>");
    });
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is rookienerd.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>

Note

You can also use more than one element to wrap the specified content.

jQuery wrapInner() example 2

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner("<em><b><marquee></marquee></b></em>");
    });
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is rookienerd.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>

In the above example we have used three tags altogether:

emphasized <em>...</em> tag
bold <b>...</b> tag
<marquee>...</marquee> tag

jQuery wrapInner() example 3

snippet

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = "<marquee><b></b></marquee>";
               $(this).wrapInner( content );
            });
         });
      </script>
		
      <style>
         .div{ margin:12px;padding:12px; border:2px solid #666; width:100px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class="div" id="destination">rookienerd.com</div>
<div class="div" style="background-color:lightpink;">JAVA</div>
<div class="div" style="background-color:green;">SQL</div>
<div class="div" style="background-color:lightyellow;">HTML</div>
</body>
</html>