Web Development with jQuery®

(Elliott) #1

(^110) ❘ CHAPTER 4 MANIPULATING CONTENT AND ATTRIBUTES
border: 1px solid black;
}
table.johnLennonAlbums th {
text-align: left;
background: lightgreen;
}
table.johnLennonAlbums tbody tr:hover {
background: lightblue;
}
The following script demonstrates the prepend() and append() methods:
$(document).ready(
function()
{
$('button#documentAppend').click(
function(event)
{
event.preventDefault();
if (!$('tr#johnLennonDoubleFantasy').length)
{
$('table tbody').append(
"\n" +
"Double Fantasy\n" +
"1980\n" +
"\n"
);
}
}
);
$('button#documentPrepend').click(
function(event)
{
event.preventDefault();
if (!$('tr#johnLennonPlasticOnoBand').length)
{
$('table tbody').prepend(
"\n" +
"John Lennon/Plastic Ono Band\n" +
"1970\n" +
"\n"
);
}
}
);
}
);
In the preceding example, to append HTML content to the element, you use jQuery’s
append() method, which adds the Double Fantasy album’s entry to the element when you
http://www.it-ebooks.info

Free download pdf