Web Development with jQuery®

(Elliott) #1

(^108) ❘ CHAPTER 4 MANIPULATING CONTENT AND ATTRIBUTES
As you can see in Figure 4-10, jQuery applies the HTML content depending on your selection.
If you’ve selected several elements, the content modifi cation has been applied to several elements,
and if you’ve selected only a single element, your content modifi cations have been applied to only a
single element.
Removing Content
Removing content can also be done with jQuery’s text() and html() elements. All you have to do to
remove an element is to call either method with an empty string, that is, text('') or html(''). That
isn’t the only way to remove content from a document, however, and you’ll see alternative methods
for doing this later in this chapter.


Appending and Prepending Content


The word prepend is a term more or less invented by the technical programming world. (It does
have some use outside that world.) It means to prefi x or add some content to the beginning of some-
thing else. In fact, you won’t fi nd the word prepend in many dictionaries, and if you do, you’ll fi nd
that the defi nition offers: “(transitive) To premeditate; to weigh up mentally.” This doesn’t match up
with the way it’s used in the technical programming community, in which this word is meant to be
the opposite of append, which, of course, means “to add to the end of something.”

This term has come out of the technical programming world by virtue of the fl exible nature of
computing when compared to the world of print. In the print world, modifying a hard-copy body
of work is diffi cult to do. You have to renumber pages, possibly renumber chapters, and rewrite the
table of contents and the index. Without a computer, that’s an enormous amount of work. So in the
print world, it’s easier to add to a printed body of work by appending, or tacking on new content
to the end. It’s not always done that way, but it’s one possible explanation for why the world never
actually needed a word like prepend until the existence of computers made the action a necessity. In
the technical world, it’s easy to glue something onto the beginning of something else, so we made a
new word to describe that action.

The following example, Example 4-6, demonstrates jQuery’s append() and prepend() methods:


<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='utf-8' />
<title>John Lennon Albums</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 4-6.js'></script>
<link href='Example 4-6.css' rel='stylesheet' />
</head>
<body>
<form action='javascript:void(0);' method='get'>
<h4>John Lennon Albums</h4>
<table class='johnLennonAlbums'>
<thead>
<tr>
<th>Title</th>

http://www.it-ebooks.info

Free download pdf