jQuery wrapInner – wrap element around the content

jQuery wrapInner wraps specified HTML element(s) around the content of each element in a set of matched elements.

It may be nested structure but it should contain only one inmost element.

Possible values of jQuery wrapInner:

– HTML elements
– jQuery objects
– DOM elements

Suppose you have following HTML:

<div class="main">
<div class="sub">John Doe</div>
<div class="sub">Jane Doe</div>
</div>

Now you can insert an HTML <span> structure around the content of each sub <div> elements like so:

$( ".sub" ).wrapInner( "<span></span>");

Final Output:

<div class="main">
<div class="sub"><span>John Doe</span></div>
<div class="sub"><span>Jane Doe</span></div>
</div>

For more information click here.