.wrapAll()

Syntax

.wrapAll(wrappingElement)

Parameters

wrappingElement: An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the matched elements

Return value

The jQuery object, for chaining purposes.

Description

Wrap an HTML structure around all elements in the set of matched elements.

Examples

For

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

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

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

Result:

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

Wrap all elements

 
<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").wrapAll(document.createElement("div"));
        });
    </script>
  <style>
      div { border: 2px solid blue; }
  </style>
  </head>
  <body>
    <body>
         <p>Hello</p> <p>Hello</p> <p>Hello</p>
  </body>
</html>

Click to view the demo

Wrap all with 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").wrapAll("<div></div>");
        });
    </script>
  <style>
      div { border: 2px solid blue; }
  </style>
  </head>
  <body>
    <body>
         <p>Hello</p> <p>Hello</p> <p>Hello</p>
  </body>
</html>

Click to view the demo

WrapAll With More Than One Tag

 
<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").wrapAll("<div><b>asdf</b></div>");
        });
    </script>
  <style>
      div { border: 2px solid blue; }
  </style>
  </head>
  <body>
    <body>
         <p>Hello</p> <p>Hello</p> <p>Hello</p>
  </body>
</html>

Click to view the demo

each element in the matched set would get wrapped with an 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").wrapAll($(".doublediv"));
        });
    </script>
    <style>
      .doublediv { color:red; }
    </style>
  </head>
  <body>
    <body>
          <p>World</p>
          <p>World</p>
          <div class="doublediv">asdf<div>
    </body>
</html>

Click to view the demo

Wrap tag created by document.createElement

 
<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').wrapAll(document.createElement('div'));
              }
            );
    </script>
    <style type='text/css'>
        h4, p {
            margin: 5px;
        }
        div {
            background: #70d6f0;
            border: 3px solid #7ac3d5;
            margin: 3px;
        }
    </style>
  </head>
  <body>
    <p>asdf</p>
  </body>
</html>

Click to view the demo