Web Development with jQuery®

(Elliott) #1

(^106) ❘ CHAPTER 4 MANIPULATING CONTENT AND ATTRIBUTES
margin: 0 ;
padding: 15px;
}
The following script demonstrates setting element content via jQuery’s text() and html() methods:
$(document).ready(
function()
{
$('p#grouchoQuote1').text(
'Getting older is no problem. You just have to ' +
'live long enough. - Groucho Marx'
);
$('p#grouchoQuote2').html(
'I have had a perfectly wonderful evening, but ' +
'this wasn’t it. - Groucho Marx'
);
}
);
Figure 4-9 shows how the content applied via the text() method results in the HTML tags being
ignored and showing through in the rendered output of the

element with id name grouchoQuote1.
It also shows how the HTML tags are expanded in the content of the

element with id name
grouchoQuote2, which is applied using jQuery’s html() method.


FIGURE 4-9


Setting Text or HTML Content for Multiple Items


Although you probably usually think about text or HTML content being applied only to a single
element at a time, jQuery’s text() and html() methods will apply that text or HTML content to
one or more elements. The following example, Example 4-5, demonstrates what happens when you
apply HTML content to a selection that includes multiple elements:

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />

http://www.it-ebooks.info

Free download pdf