jQuery wrap() Method

jQuery wrap Method wraps specified HTML element(s) around each element in the set of matched elements.

This wrapping process is very useful for injecting any additional structure into a document, without destroying the original semantic qualities of the document.

Possible values are:

• HTML elements
• jQuery objects
• DOM elements

This is the simple syntax to use this method.

selector.wrap( html )

Parameters

elem – A string of HTML which will be created on the fly and wrapped around each target.

Following is a simple example with a simple usage of this method.

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

Read Also:

• jQuery unwrap() – Remove wrapping div
• jQuery wrapAll – wrap all elements
• jQuery wrapInner – wrap element around the content

Now, .wrap() can insert an HTML structure around the each inner <div> elements as below:

$( ".sub" ).wrap( "<div class='wrap'></div>" );

The result will be:

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

For more information go to jQuery references.

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.