Web Development with jQuery®

(Elliott) #1

Manipulating HTML and Text Content (^) ❘ 111
click the Append button. In addition, when you tap the Prepend button, the John Lennon/Plastic
Ono Band entry is added to the beginning of the element. Figure 4-11 shows the example at
page load, minus the additional entries.


FIGURE 4-11


Inserting Beside Content


With the append() and prepend() methods, you’re adding to content within an element. With the
before() and after() methods, you are inserting content beside an element. The before() and
after() methods are demonstrated in the following document (Example 4-7):

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='utf-8' />
<title>Groucho Marx Quote</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 4-7.js'></script>
<link href='Example 4-7.css' rel='stylesheet' />
</head>
<body>
<p>
Why, I'd horse-whip you, if I had a horse.
</p>
</body>
</html>

The following style sheet is applied to the preceding document:


body {
font: 12px "Lucida Grande", Arial, sans-serif;
color: rgb(50, 50, 50);
margin: 0 ;

http://www.it-ebooks.info

Free download pdf