[jQuery] Getting and Setting Element/Attribute Values

The most basic operations you want to do with jQuery is to get or set element contents or element attribute values. If you use JavaScript to do these, you need to navigate elements using DOM, which is quite complex. Moreover DOM navigation is not consistent among browsers. jQuery encapsulates all the browser inconsistencies.

 

1. Getting Attribute Values

The “attr()” function is used to get the value of an attribute.

<img id="img1" src="..." alt="My Test Image" />

You want to read the “alt” attribute value of the <img> element.

$('#img1').attr('alt'); // My Test Image

 

2. Setting Attribute Values

You can use the “attr()” function to set a value to an attribute too.

  • attr(attrName, value);
  • attr(map);

If you want to set a value to a single attribute, you can use the first syntax. The second syntax can set multiple attributes at the same time. The syntax of a map is {key:value, key:value}.

<img id="img1" src="images/cover1.jpg" alt="My Test Image" />

To change the “alt” value:

$('#img1').attr('alt', 'New Image');
alert($('#img1').attr('alt'));

To change the “alt” and “src” values:

$('#img1').attr({'src':'images/cover2.jpg', 'alt':'New Image' });
alert($('#img1').attr('alt'));
alert($('#img1').attr('src'));

 

3. Removing Attribute Values

The “removeAttr()” function is used to remove attribute values.

<img id="img1" src ="..." height="20" alt="..." />
alert($('#img1').attr('height'));
$('#img1').removeAttr('height');
alert($('#img1').attr('height'));

 

4. Getting Element Content

Some elements can have text data (<p> or <span>) or even other html elements (<div><table>).

You can read content of an element using “text()” and “html()” functions.

  • The “html()” function returns the content (including other elements) of any element. This method uses the browser’s “innerHTML” property.
  • The result of the “text()” method is a string content.
<div id="div1">
  <p id="p1">Hello, World</p>
</div>

Let’s read the text in the <p> element and the content of the <div> element.

$('#p1').text(); // Hello, World
$('#div1').text(); // Hello, World

$('#p1').html(); // Hello, World
$('#div1').html(); // <p id="p1">Hello, World</p>

 

5. Changing Text Content

The “text()” function is used to read the text content of an element. The “text()” function is also used to set the text content to an element.

<div id="div1">
  <p id="p1">Hello, World</p>
</div>
$('#p1').text('Hi, Universe');
alert($('#p1').text());

 

6. Changing HTML Content

The “html()” function is used to set the html content.

<div id="div1"> </div>
var content = '<strong>Hello, <em>World</em></strong>';
$('#div1').html(content);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s