.wrapInner()

jQuery

previous page next page

.wrapInner()

Categories: Manipulation > DOM Insertion, Around

.wrapInner( wrappingElement ) Returns: jQuery

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

  • version added: 1.2.wrapInner( wrappingElement )

    • wrappingElement
      Type: String
      An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the content of the matched elements.

  • version added: 1.4.wrapInner( function(index) )

    • function(index)
      Type: Function()
      A callback function which generates a structure to wrap around the content of the matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.

The .wrapInner() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around the content of each of the elements in the set of matched elements.

Consider the following HTML:

1
2
3
4
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

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

                                

                                

                                  

                                      <div class="inner">Goodbye</div>
                                  

                                

                                

                                  

                                    
                                      </div>

Using .wrapInner(), we can insert an HTML structure around the content of each inner <div> elements like so:

1
 
                                

                                  

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

The new <div> element is created on the fly and added to the DOM. The result is a new <div> wrapped around the content of each matched element:

1
2
3
4
5
6
7
8
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="inner">
                                  

                                

                                

                                  

                                        <div class="new">Hello</div>
                                  

                                

                                

                                  

                                      </div>
                                  

                                

                                

                                  

                                      <div class="inner">
                                  

                                

                                

                                  

                                        <div class="new">Goodbye</div>
                                  

                                

                                

                                  

                                      </div>
                                  

                                

                                

                                  

                                    
                                      </div>

The second version of this method allows us to instead specify a callback function. This callback function will 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:

1
2
3
 
                                

                                  

                                    $('.inner').wrapInner(function() {
                                  

                                

                                

                                  

                                      return '<div class="' + this.nodeValue + '" />';
                                  

                                

                                

                                  

                                    });

This will cause each <div> to have a class corresponding to the text it wraps:

1
2
3
4
5
6
7
8
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="inner">
                                  

                                

                                

                                  

                                        <div class="Hello">Hello</div>
                                  

                                

                                

                                  

                                      </div>
                                  

                                

                                

                                  

                                      <div class="inner">
                                  

                                

                                

                                  

                                        <div class="Goodbye">Goodbye</div>
                                  

                                

                                

                                  

                                      </div>
                                  

                                

                                

                                  

                                    
                                      </div>

Note: When passing a selector string to the .wrapInner() function, the expected input is well formed HTML with correctly closed tags. Examples of valid input include:

1
2
3
 
                                

                                  

                                    $(elem).wrapInner("<div class='test' />");
                                  

                                

                                

                                  

                                    $(elem).wrapInner("<div class='test'></div>");
                                  

                                

                                

                                  

                                    $(elem).wrapInner("<div class=\"test\"></div>");

Examples:

Example: Selects all paragraphs and wraps a bold tag around each of its contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>p { background:#bbf; }</style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <p>cruel</p>
                                    

                                  

                                  

                                    

                                        <p>World</p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("p").wrapInner("<b></b>");
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Wraps a newly created tree of objects around the inside of the body.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        div { border:2px green solid; margin:2px; padding:2px; }
                                    

                                  

                                  

                                    

                                        p { background:yellow; margin:2px; padding:2px; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        Plain old text, or is it?
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Selects all paragraphs and wraps a bold tag around each of its contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>p { background:#9f9; }</style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <p>cruel</p>
                                    

                                  

                                  

                                    

                                        <p>World</p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("p").wrapInner(document.createElement("b"));
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Selects all paragraphs and wraps a jQuery object around each of its contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        p { background:#9f9; }
                                    

                                  

                                  

                                    

                                        .red { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                        <p>cruel</p>
                                    

                                  

                                  

                                    

                                        <p>World</p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("p").wrapInner($("<span class='red'></span>"));
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page