Accessing and Modifying Elements, Attributes, and Content in jQuery

Now that you’ve seen the myriad ways jQuery can select elements, you probably will want to do something with these retrieved elements such as getting/setting text, attributes, or even HTML content. jQuery provides several convenient methods for achieving all of this.

1. Working with Content

One of the most glorious features of JavaScript is the ability to update text on web pages on the fly, instead of waiting for a page reload. With jQuery, it’s easy to not only change the contents of a node, but to retrieve them as well. Consider the case where you’d like to get the contents of a paragraph element of an HTML page. One manner to accomplish this is with the .text() method. But beware, the .text() method combines the text of all the elements in a selected set.

<!DOCTYPE html>

<html>

<head>

<script src=”http://code.jquery.com/jquery-1.7.1.js”>

</script>

<script type=”text/javascript”>

$(function(){

var content = $(”p”).text();

console.log(content);

});

</script>

</head>

<body>

<p>Where’s </p>

<p>The </p>

<p>Beef?</p>

</body>

</html>

Code snippet is from text.txt

This example displays “Where’s the beef?” in the console. That’s all fine and great, but what about updating the contents? You use the same method, .text(), but instead of an argument list, feed it a string argument containing the new text you’d like to insert. In this next example, after page load, the paragraph element doesn’t display the text “blah” but rather “The trees are green.”

<!DOCTYPE html>

<html>

<head>

<script src=”http://code.jquery.com/jquery-1.7.1.js”>

</script>

<script>

$(function(){

$(“p”).text(“The trees are green.”);

});

</script>

</head>

<body>

<p>Blah</p>

</body>

</html>

Code snippet is from text-setter.txt

The second way to get and set content is using the .html() method. Again, just like .text(), .html() gets or sets a value depending on whether you feed it an argument. So, what’s the difference between .text() and .html() ? .text() works with both XML and HTML documents; .html() doesn’t. Also, .text() gets the text contents of all descendants, whereas .html() retrieves only the first element matched.

The following example both gets and sets HTML content of a div tag:

<!DOCTYPE html>

<html>

<head>

<script src=”http://code.jquery.com/jquery-1.7.1.js”>

</script>

<script>

$(function(){

var content = $(“div”).html();

console.log(content);

$(“div”).html(“<p style=’color:red;’>RED</p>”);

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

Code snippet is from html.txt

Upon loading this example, you’ll find the following in the console:

<ul>

<li>one</li>

<li>two</li>

<li>three</li>

</ul>

and after pressing Enter, the div content is updated to a paragraph element with the text RED. The CSS style in this example is hard-coded, but this really isn’t the best way to accomplish the same effect. It’s better to use the .css() method discussed in the next chapter.

Finally, both .text() and .html() also accept a function as a parameter for setting content. This allows for dynamic creation of content, instead of just static text.

<!DOCTYPE html>

<html>

<head>

<script src=”http://code.jquery.com/jquery-1.7.1.js”>

</script>

<script>

$(function(){

$(“div#testHTML”).html(function(){

var content = “”;

for(i = 1; i <=3; i++){

content += “testing ” + i + “…<br />”;

}

return content;

});

});

</script>

</head>

<body>

<div id=”testHTML”>

</div>

</body>

</html>

Code snippet is from html-with-function-argument.txt

In this last example, the body consists of a lone div. After selecting the testHTML div, the .html() method is passed an anonymous function which generates the following HTML:

testing 1…<br />

testing 2…<br />

testing 3…<br />

2. Manipulating Attributes

Attributes are the properties of an element, not to be confused with a JavaScript object property. Element attribute values are both retrieved and modified using the .attr() method. If .attr() is passed two values, one for the attribute name and one for the attribute value, then it sets an attribute, but if it’s invoked with one argument (again, the attribute name), it gets a value. The following example illustrates both cases:

<!DOCTYPE html>

<html>

<head>

<style type=”text/css”>

.blue {

Background-color: blue;

}

</style>

<script src=”http://code.jquery.com/jquery-1.7.1.js”>

</script>

<script>

$(function(){

$(“p#i_am_blue”).attr(“class”,”blue”);

var attribute = $(“p#i_am_blue”).attr();

console.log(attribute);

});

</script>

</head>

<body>

<p id=”i_am_blue”>

I am Blue.

</p>

</body>

</html>

Code snippet is from atttribute-manipulation.txt

Sometimes you just don’t need attributes. Yep, you guessed it, there’s a method for removing an attribute too, surprisingly enough called .removeAttr(). The following code example shows .removeAttr() in action, removing the class attribute from the #i_am_not_blue div.

<!DOCTYPE html>

<html>

<head>

<style type=”text/css”>

.blue {

background-color: blue;

}

</style>

<script src=”http://code.jquery.com/jquery-1.7.1.js”>

</script>

<script>

$(function(){

$(“p#i_am_not_blue”).removeAttr(“class”);

});

</script>

</head>

<body>

<p id=”i_am_not_blue” class=”blue >

I am not Blue.

</p>

</body>

</html>

Code snippet is from removeAttr.txt

There’s no need for a console.log to verify this example. After loading this example you’ll see that the text is black.

Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc

Leave a Reply

Your email address will not be published. Required fields are marked *