Web Development with jQuery®

(Elliott) #1

Manipulating HTML and Text Content (^) ❘ 117
seventiesAlbums and then selects the descendant element. So, in plain English, the script
says, “Take the element in the hidden table and duplicate and insert that element
before the elements of the other two tables containing discography information for 1970s
era albums of two former Beatles.” The other line does the same thing:
$('table#seventiesAlbumsTemplate tfoot')
.insertAfter('table.seventiesAlbums tbody');
However this time, you take the element from the hidden table and duplicate and insert that
element after the element of the other two tables. Essentially, the insertBefore() and
insertAfter() methods make it easier to do templating.


Wrapping Content


In jQuery, wrapping an element means creating a new element and placing an existing element
within a document inside that new element.

jQuery provides a few methods for wrapping content, that is to say, methods that take one or more
elements and place those elements within container elements to change the structural hierarchy of a
document. The methods that jQuery provides that enable you to wrap content are wrap(), wrapAll(),
and wrapInner(). jQuery provides a single method to do the reverse to unwrap an element, and that
method is called unwrap(). The following sections demonstrate how to use these methods.

Wrapping a Selection of Elements Individually


jQuery’s wrap() method wraps each element matched in a selection individually. That is, if your
selection matches fi ve different elements, jQuery’s wrap() method makes fi ve separate wrappers. To
better illustrate how this works, the following code, Example 4-9, demonstrates how the wrap()
method wraps three <p> elements within <div> elements:

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='utf-8' />
<title>Mitch Hedberg Quotes</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 4-9.js'></script>
<link href='Example 4-9.css' rel='stylesheet' />
</head>
<body>
<h4>Mitch Hedberg Quotes</h4>
<p>
Dogs are forever in the push up position.
</p>
<p>
I haven’t slept for ten days, because that would be too long.
</p>
<p>
I once saw a forklift lift a crate of forks. And it was way
too literal for me.

http://www.it-ebooks.info

Free download pdf