2010

JQuery 101: Setting html attributes and content using JQuery

Posted By : Shaun McCran
Related Categories: JQuery, Javascript

This article follows one from a few days ago, where I explained how to use the JQuery .attr() method to get html attributes. In this article I will show you how a small change to the same .attr() method will allow you to set the value of html attributes.

I'll also cover the .text() and .html methods as they allow very similar functionality.

This article is the second in a planned series demonstrating some of the key concepts of the JQuery library, and how to use it, starting at a beginner level and working up.

Here is an example of setting attributes using JQuery.

In this article we are using the .attr() method to use JQuery to set html attribute values from elements within the DOM.

The .attr() method can be used to set or create a html attribute when you declare the attribute name followed by a value. The code below is taken from the example link in this article.

view plain print about

1<s/cript language="javascript" src="pathTo/jquery.js"></s/cript>
2
3<s/cript type="text/javascript">
4$(document).ready(function() {
5
6$("#setBorder").click(function() {
7    $(".exampleDiv").attr( { class: "endState" } );
8});
9
10$("#setId").click(function() {
11    $(".exampleDiv").attr( { id: "Created id value" } );
12});
13
14$("#setHtml").click(function() {
15    $(".exampleDiv").html('<b>New<br/> text</b>');
16});
17
18$("#setText").click(function() {
19    $(".exampleDiv").text('New text');
20});
21
22$("#setTitle").click(function() {
23    $(".exampleImg").attr( { title: "This is my new title div", border: "10" } );
24});
25
26});
27</s/cript>
28
29<style>
30.startingState {width: 100px; height: 100px; border: 1px #000 solid;}
31.endState {width: 100px; height: 100px; border: 5px #ff0000 solid;}
32</style>
33
34<ul>
35<li><a id="setBorder" href="javascript:void(0);">Set the div's class value to a different style</a></li>
36
37<li><a id="setId" href="javascript:void(0);">Create and Set the div's id value to something new</a>(you'll have to view this in firebug or something)</li>
38
39<li><a id="setHtml" href="javascript:void(0);">Set the content of the div using html</a></li>
40
41<li><a id="setText" href="javascript:void(0);">Set the content of the div using text only</a></li>
42
43<li><a id="setTitle" href="javascript:void(0);">Set the title attribute of an image, and give it a border</a></li>
44
45</ul>
46
47
48<div class="exampleDiv startingState">Starting state div</div>
49<br> <br>
50
51<img src="jquery-logo.gif" class="exampleImg">

Looking at the code above we can see that we include a reference to the JQuery library, then we have five functions. Each of these five functions has a trigger in the five links below it, that triggers the associated JQuery method.

The method works by listing the attribute you want to set, followed by a colon, then the value, IE a name value pair. These are separated with a comma. If you declare an attribute that does not exist it will be created, whereas if you set the value for an existing attribute it will be over written.

view plain print about

1$(".exampleDiv").attr( { class: "endState" } );

So the line above we are setting the value of the class attribute to 'endstate'.

view plain print about

1$(".exampleImg").attr( { title: "This is my new title div", border: "10" } );

In this example we are adding a title to an image, and setting the border element to 10px, using name value pairs separated by a comma.

Two of the other examples above are using the .html() and .text() methods. These both work in a very similar way to the .attr() method in that you can use them to get or set the values of DOM objects, based on whether they have values within the parenthesis.

view plain print about