.wrapInner()

Syntax

.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

Return value

The jQuery object, for chaining purposes.

Description

Wrap an HTML structure around the content of each element in the set of matched elements.

Examples

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

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

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

Results

 
<div class="container">
 <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">
 <div class="inner">
 <div class="Hello">Hello</div>
 </div>
 <div class="inner">
 <div class="InnerText">InnerText</div>
 </div>
</div>

Add border with wrapInner

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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

Wrap tag to add border

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("p").wrapInner($("<span class='red'></span>"));
        });
    </script>
    <style>
      .red { border:2px green solid;}
    </style>
  </head>
  <body>
    <body>
       <p>Hello</p>
    </body>
</html>

Click to view the demo

Innerwrap created element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>Hello</p>

    </body>
</html>

Click to view the demo