Modifying elements

Replacing elements html and text

Modifying elements

You've always had the ability to modify the DOM using JavaScript. Where jQuery comes into play is in how it eases the process. As we've seen, jQuery makes it easier to select items, and handles cross browser support for us. This allows us to focus more attention on building the UI for our users, and implement the necessary logic, and less time on how to make the page behave the way we want.

In this section, we'll talk about some of the functions jQuery offers for accessing and replacing the values of elements, attributes and CSS. Some of this was introduced in Module 1, but there are a few new features we'll introduce here.

val

If you wish to retrieve the value of an input control, all you have to do is call val().

var value = $('#some-input-control').val();

If you wish to set the value, simply pass the new value in as a parameter to the val function. If you wish to set a textbox to a blank value, simply use an empty string.

// Empty a textbox
$('#some-textbox').val('');

html and text

The two most basic functions for working with the content of an element are text and html. Both functions will return the entire contents of the element (if called without a parameter), or replace the entire contents with the parameter you provide. The difference between the two is encoding.

If you use text, all special HTML characters, such as < and >, will be replaced with their encoded equivalents, such as &< and &<. This can be helpful when working with data from an untrusted source, as it will not be written out to the page as HTML.

// write text out to the screen
// this will be displayed as the literal
// value
// the text value will not be bolded

$('#output').text('value');

If you ran the code above, the user would see: <strong>value</strong>.

html, however, will return the contents and display the new contents as HTML

// write text out to the screen
// this will be displayed as value
// with the word bolded

$('#output').html('value');

The above JavaScript will display as value.

Working with attribute and classes

Working with attributes

To work with and manipulate attributes, jQuery provides the attr function. Among the many overloads of the function, the two most common are the ones that take one or two parameters.

If you need to retrieve the value of an attribute, you can do this by simply calling attr(name).

To change the value of an attribute, simply call attr(name, newValue).

Even special attributes such as id, name and class are attributes, and can be both accessed and updated using the exact same syntax. However, certain attributes, like class and style have functions all of their own.

Working with classes

When you're updating a UI the simplest, and most common, way of making changes is through CSS classes. To assist you, jQuery provides addClass and removeClass. As you might expect, addClass will add the class you provide as a parameter, and removeClass will remove it.

One nice thing about removeClass is it will not throw an error if the class doesn't exist. As a result, if you know you don't want a class, but you don't know if it's currently being applied, you can simply call removeClass knowing the code won't fail.

Working with styles

Working with CSS

As a general rule, if you want to adjust the style of an element the best way to do this is through classes. By working with classes, you gain the ability to reuse that style in other places. In addition, you separate the style from the code, which allows you to easily change the style as needed without having to update your JavaScript.

But you may still find yourself needing to modify the CSS of an element directly. If this is the case, you could manipulate an item's style by simply using attr.

$('#target').attr('style', 'color: red');

That would work, but it's not ideal. Remember that attr is going to replace the style attribute, not update it, so any existing styles would be lost. Trying to add or remove styles using attr becomes a challenge.

Setting styles is simply a matter of setting a bunch of property/value pairs. Because of that fact, jQuery exposes an item's style as these pairs through a special function, css.

css will parse an items style property as the set of key value pairs, allowing you to both read and write each property individually.

If you want to retrieve the value of a CSS property, you call css(property).

// Retrieve an item's color
var color = $('#target').css('color');

if you wish to set a property, call css(property, newValue)

// Change an item's color to red
$('#target').css('color', 'red');

If you want to set multiple properties, you can create a JavaScript object with the property/value pairs, and then pass the object into the cssfunction. You can create the object like you would a normal JavaScript object.

The catch, of course, is properties like background-color. Obviously, JavaScript can't work with a hyphen in a name. You could create an object with that property by either using camel casing like { backgroundColor: 'red' }, or set the property names as strings like {'background-color': 'red' }. Either way works just fine.

The end result of the JavaScript below would be an element with red text and a yellow background.

var style = {
 color: 'red',
 backgroundColor: yellow
};

$('#target').css(style);