Chapter 4. DOM Manipulation Methods

Washed his hands of a deadly fate

He put himself in an altered state

—Devo,

"Mecha-mania Boy"

All of the methods in this chapter manipulate the DOM in some manner. A few of them simply change one of the attributes of an element, while others set an element's style properties. Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on.

A few of these methods such as .attr(), .html(), and .val() also act as getters, retrieving information from DOM elements for later use.

General Attributes

Gets the value of an attribute for the first element in the set of matched elements.

.attr(attribute)

A string containing the attribute value.

We can get any attribute of an element rather easily without jQuery, by using the native JavaScript function getAttribute. Additionally, most of these attributes are available through JavaScript as DOM node properties. Some of the more common properties are:

Let's consider the following link:

<a id="myid" href="/archives/jquery-links.htm" title="A few jQuery links from long ago">old jQuery links</a>

Using jQuery's .attr method to get an element's attribute has two main advantages:

  1. Convenience: it can be chained to a jQuery object.
  2. Cross-browser consistency: The .attr method always gets the actual attribute text, regardless of which browser is being used. On the other hand, when using getAttribute() with attributes such as href, src, and cite, some browsers (correctly) get the attribute text, while others get the absolute URL, regardless of whether the attribute has an absolute URL or a relative one.

In order to use getAttribute() or any of an element's properties as a substitute for .attr(), we need to make sure that we are working with a DOM node rather than a jQuery object. To convert the first element represented in a jQuery object to a DOM node, we can use either [0] or .get(0).

All of the following use getAttribute('title') to get its title attribute:

  1. document.getElementById('myid').getAttribute('title')
  2. $('#myid').get(0).getAttribute('title')
  3. $('#myid')[0].getAttribute('title')

With any of these options, we could replace .getAttribute('title') with .title.

Sets one or more attributes for the set of matched elements.

.attr(attribute, value)
.attr(map)
.attr(attribute, function)

The jQuery object, for chaining purposes.

The .attr method is a convenient and powerful way to set the value of attributes especially when setting multiple attributes or values returned by a function. Let's consider the following image:

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

We change the alt attribute by putting 'alt' followed by a comma and the new value inside the .attr method's parentheses:

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

We can add an attribute in the same way:

$('#greatphoto').attr('title', 'Beijing Brush Seller photo by Kelly Clark');

To change the alt attribute and add the title attribute at the same time, we can pass both sets of names and values into the method at once using a map (JavaScript object syntax). We join each attribute to its value with a colon and separate each pair with a comma:

$('#greatphoto').attr({alt:'Beijing Brush Seller', title: 'Beijing Brush Seller photo by Kelly Clark'});

When setting multiple attributes, the quotation marks around the attribute names are optional.

By using a function to set attributes, we can concatenate a new value with an existing value:

$('#greatphoto').attr({alt: function() {return 'Beijing ' + this.alt}, title: function() {return 'Beijing ' + this.alt + ' photo by Kelly Clark'}});

This use of a function can be even more useful when we apply the attributes to multiple elements.

Removes an attribute from each element in the set of matched elements.

.removeAttr(attribute)

The jQuery object, for chaining purposes.

The .removeAttr method uses the JavaScript removeAttribute function, but it has the advantage of being able to be chained to a jQuery selector expression.