jQuery 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:

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.

<!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 javatpoint.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>

Test it Now

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

jQuery wrapInner() example 2

<!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 javatpoint.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>

Test it Now

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

<!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">Javatpoint.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>

Test it Now

Next TopicjQuery focus()

← prev next →

jQuery Tutorial

jQuery Effects

jQuery HTML/CSS

jQuery Form

jQuery Events

jQuery UI

Interview Questions

jQuery wrapInner()

Parameters of jQuery wrapInner() method

Example of jQuery wrapInner() method

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

jQuery wrapInner() example 2

jQuery wrapInner() example 3