Web Development with jQuery®

Manipulating HTML and Text Content (^) ❘ 115

Back To The Egg
1979





The following style sheet is applied to the preceding markup document:
body {
font: 12px "Lucida Grande", Arial, sans-serif;
color: rgb(50, 50, 50);
margin: 0 ;
padding: 15px;
}
table.seventiesAlbums {
table-layout: fixed;
width: 500px;
border: 1px solid black;
border-collapse: collapse;
}
table.seventiesAlbums th,
table.seventiesAlbums td {
padding: 3px;
border: 1px solid black;
}
table.seventiesAlbums th {
text-align: left;
background: lightgreen;
}
table.seventiesAlbums tbody tr:hover {
background: lightblue;
}
table#seventiesAlbumsTemplate {
display: none;
}
The following script demonstrates how you use the insertBefore() and insertAfter() methods with
selectors to duplicate content in a document:
$(document).ready(
function()
{
$('table#seventiesAlbumsTemplate thead')
.insertBefore('table.seventiesAlbums tbody');
$('table#seventiesAlbumsTemplate tfoot')
.insertAfter('table.seventiesAlbums tbody');
}
);
Figure 4-13 shows the results of the preceding document in Safari.
[http://www.it-ebooks.info](http://www.it-ebooks.info)