.wrapInner()

Syntax and Description

.wrapInner() wraps an HTML structure around the content of each element in the set of matched elements.

.wrapInner(wrappingElement)
wrappingElement: An HTML snippet, a selector expression, a jQuery object, or a DOM element specifying the structure to wrap around the matched elements
.wrapInner(wrappingFunction)
wrappingFunction: A callback function that generates a structure to wrap around the matched elements

Its return value is the jQuery object, for chaining purposes.

For the following HTML elements


<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

To Insert an HTML structure around the content of the inner <div> elements we can do as follows:


$('.inner').wrapInner('<div class="new" />');

Results


<div class="container">
 <div class="inner"> <div class="new">Hello</div>
 </div>//w  ww .j ava  2  s  .c o  m
 <div class="inner">
 <div class="new">InnerText</div>
 </div>
</div>

A callback function can be passed in to be called once for every matched element.

It should return a DOM element, jQuery object, or HTML snippet in which to wrap the content of the corresponding element. For example:


$('.inner').wrapInner(function() {
 return '<div class="' + this.nodeValue + '" />';
});

Results


<div class="container">
 <div class="inner">
 <div class="Hello">Hello</div>
 </div>/* w  w  w  . j  ava  2  s .  c  o m*/
 <div class="inner">
 <div class="InnerText">InnerText</div>
 </div>
</div>

Add border with wrapInner


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from www. j a  v  a  2 s .  c  o m-->
             $("p").wrapInner("<div></div>");
        });
    </script>

    <style>
      div { border:2px green solid;}
    </style>
  </head>
  <body>
    <body>
       <p>Hello</p>

    </body>
</html>

Click to view the demo

The code above generates the following result.

wrapInner with new created element

The following code calls wrapInner method and passes in new created element.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  w w w . j  a  v a2  s  .  c o  m-->
             $("p").wrapInner(document.createElement("b"));
        });
    </script>
    <style>
      div { border:2px green solid;}
    </style>
  </head>
  <body>
    <body>
       <p>java2s.com</p>

    </body>
</html>

Click to view the demo

The code above generates the following result.