Wrapped DOM InsertionS2C Home « Wrapped DOM Insertion

In our third look at DOM manipulation we investigate the wrapped DOM insertion methods.

The jQuery wrapped DOM insertion methods allow us wrap a DOM element, HTML string, jQuery object or selector expression around:

  • Each element in the matched set.
  • All elements in the matched set.
  • Around the content of each element in the matched set.

Wrapped DOM Insertion Methods Description
.wrap()Wrap a DOM element, HTML string, jQuery object or selector expression around each element in the matched set.
.wrapAll()Wrap a DOM element, HTML string, jQuery object or selector expression around all elements in the matched set.
.wrapInner()Wrap a DOM element, HTML string, jQuery object or selector expression around the content of each element in the matched set.

The .wrap() Method go to top of page Top

Insert parameter specified content, after each element in the matched set.

We will be using the .wrap( wrappingElement ) signature for our example which wraps a DOM element, HTML string, jQuery object or selector expression around each element in the matched set.

The second signature .wrap( function(index) ) calls a function that returns a DOM element(s), HTML string, or jQuery object to wrap around each element in the matched set.

Examples of both signatures are available in the reference section.

In the example below when the button is pressed the first time, we wrap 'div' 'p' and 'strong' elements around the saying below. The CSS for the 'div3' id and the html for the text we are wrapping is displayed first.


#main #div3 {
  background-color: yellow;
  padding: 10px;
  border: 1px solid black;
}
...
<span id="saying">He who laughs last, laughs longest!</span>

He who laughs last, laughs longest!


$(function(){
  $('#btn1').one('click', function() {
     $('#saying').wrap('<div id="div3"><p><strong></strong></p></div>'); 
  });
});

Press the button below to action the above code:


The .wrapAll() Method go to top of page Top

Wrap a DOM element, HTML string, jQuery object or selector expression around all elements in the matched set.

We use this methods only signature .wrapAll( wrappingElement ) in the example below.

In the example below when the button is pressed the first time, we wrap a 'div' element around the 'p' elements below. The CSS for the 'div4' and 'div5' ids and the html for the text we are wrapping is displayed first.


#main #div4, #main #div5 {
  background-color: silver;
  padding: 10px;
  border: 1px solid black;
}
#main #div5 {
  background-color: yellow;
}
...
<div id="div4">
  <p class="football">Football is a great game.</p>
  <p class="football">Cricket is a great game.</p>
  <p class="football">Baseball is a great game.</p>
</div>

Football is a great game.

Cricket is a great game.

Baseball is a great game.



$(function(){
  $('#btn5').one('click', function() {
    $('.football').wrapAll('<div id="div5"></div>'); 
  });
});

Press the button below to action the above code:


The .wrapInner() Method go to top of page Top

Wrap a DOM element, HTML string, jQuery object or selector expression around the content of each element in the matched set.

We will be using the .wrapInner( function(index) ) signature for our example which calls a function that returns a DOM element, HTML string, jQuery object or selector expression to wrap around the content of each element in the matched set.

The second signature .wrapInner( wrappingElement ) wraps a DOM element, HTML string, jQuery object or selector expression around the content of each element in the matched set.

In the example below when the button is pressed the first time, we wrap 'div' 'p' and 'strong' elements around the sayings below. We append the index that is passed to the function to the 'div' id attribute so we end up with div ids of 'div0, 'div1' and 'div2' and get their different backgrounds for each saying. The CSS for 'div0, 'div1' and 'div2' and the html for the text we are wrapping is displayed first..


#main #div0, #main #div1, #main #div2 {
  background-color: yellow;
  padding: 10px;
  border: 1px solid black;
}
#main #div1 {
  background-color: orange;
}
#main #div2 {
  background-color: teal;
}
...
<p>These old sayings! <em class="saying2">Blood is thicker than water!</em>
<em class="saying2">Many a slip twixt cup and lip!</em>
<em class="saying2">Prevention is better than cure!</em> are among my favourites.</p>

These old sayings! Blood is thicker than water!  Many a slip twixt cup and lip!   Prevention is better than cure! are among my favourites.


$(function(){
  $('#btn4').one('click', function() {
    $('.saying2').wrapInner( function(index, html) {
      return '<div id=' + '"div' + index + '"><p><strong></strong></p></div>';
    }); 
  });
});

Press the button below to action the above code:


Lesson 4 Complete

In this lesson we investigated the wrapped DOM insertion methods which allow us to insert new content that wraps around existing content.

Related Tutorials

jQuery 1.10 Intermediate - Lesson 2: Inner DOM Insertion
jQuery 1.10 Intermediate - Lesson 3: Outer DOM Insertion
jQuery 1.10 Intermediate - Lesson 5: DOM Removal & Replacement

What's Next?

In our final look at manipulating the DOM using jQuery we look at DOM Removal & Replacement.

go to home page Homepage go to top of page Top