.wrapInner()S2C Home « Manipulation « .wrapInner()

DOM insertion around elements.

Description

The .wrapInner() method is used to wrap a DOM element, HTML string, jQuery object or selector expression around the content of each element in the matched set.

  • Use the .wrap() method to wrap a DOM element, HTML string, jQuery object or selector expression around each element in the matched set.
  • Use the .wrapAll() method to wrap a DOM element, HTML string, jQuery object or selector expression around all elements in the matched set.
  • The .wrapInner() method accepts any string or object that could be passed to the $() factory function to specify a DOM structure:
    1. This structure may be nested several levels deep, but should contain only one innermost element.
    2. A copy of this structure will be wrapped around the content of each element in the matched set.
    3. The .wrapInner() method returns the original matched set for chaining purposes.
    4. When passing a HTML string, use well formed HTML with correctly closed tags.

Syntax

Signature Description
.wrapInner( wrappingElement )Wrap a DOM element, HTML string, jQuery object or selector expression to insert around the content of each element in the matched set.
.wrapInner( function(index) )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.

Parameters

Parameter Description Type
wrappingElementA DOM element, HTML string, jQuery object or selector expression.Element,
HTMLstring or
jQuery
function(index)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
Function

Return

A jQuery object containing the matched set before the call to the .wrapInner() method.

.wrapInner( wrappingElement ) ExampleTop

Wrap 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 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;
}
...
<p>An old saying like <i id="saying">A stitch in time saves nine!</i> often makes sense.</p>

An old saying like A stitch in time saves nine! often makes sense.


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

Press the button below to action the above code:


.wrapInner( function(index) ) ExampleTop

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.

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! <i class="saying2">Blood is thicker than water!</i>
<i class="saying2">Many a slip twixt cup and lip!</i>
<i class="saying2">Prevention is better than cure!</i> 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: