jQuery Pocket Reference

Wrapping Elements

Another type of insertion into an HTML document involves wrapping a new element around one or more elements. jQuery defines three wrapping functions: wrap() wraps each of the selected elements, wrapInner() wraps the contents of each selected element, and wrapAll() wraps the selected elements as a group. These methods are usually passed a newly created wrapper element or a string of HTML used to create a wrapper. The HTML string can include multiple nested tags, if desired, but there must be a single innermost element. If you pass a function to any of these methods, it will be invoked once in the context of each element (with the element index as its only argument) and should return the wrapper string, Element, or jQuery object. Here are some examples:

// Wrap all <h1> tags with <i> tags
// Produces <i><h1>...</h1></i>
$("h1").wrap(document.createElement("i")); 
// Wrap the content of all <h1> tags. 
// Produces <h1><i>...</i></h1>
$("h1").wrapInner("<i/>");
// Wrap the first paragraph in an anchor and div
$("body>p:first")
    .wrap("<a name='f'><div class='first'></div></a>");
// Wrap all the other paragraphs in another div
$("body>p:not(:first)")
    .wrapAll("<div class='rest'></div>");