.wrapInner()

In this chapter you will learn:

Syntax and Description for .wrapInner()
Add border with wrapInner
wrapInner with new created element

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">/*j  av a2s.com*/
 <div class="inner"> <div class="new">Hello</div>
 </div>
 <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">/*from j  av a 2 s .c om*/
 <div class="inner">
 <div class="Hello">Hello</div>
 </div>
 <div class="inner">
 <div class="InnerText">InnerText</div>
 </div>
</div>

Add border with wrapInner

<html><!--from   j  av a  2  s  .  c  o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("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

wrapInner with new created element

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

<html><!--from   j av a 2 s  .  c  o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("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

Next chapter...

What you will learn in the next chapter: