CODEWITHSUNDEEP
javascriptjqueryhtml
Victor Ionescu
Victor Ionescu

Reputation: 985

How to add an HTML attribute with jQuery

Well, I have this jQuery image slideshow that uses the attribute "control" inside an <a>. Seeing how it didn't validate I searched for a way to add this attribute inside my HMTL via jQuery but I didn't really find anything relevant. Now I don't really care about how valid my page is, but I'm really curious in how to add an HTML attribute inside an HTML tag.

In case I wasn't clear enough with my explanation, I have this code:

<a id="previous" control="-6" href="#"></a>

And I want to add control="-6" with jQuery.

Upvotes: 14

Views: 27409

Answers (7)

KatieK
KatieK

Reputation: 13843

jQuery's attr will do that. Example:

$("#previous").attr("control", "-6");

Also check out this example at http://jsfiddle.net/grfSN/.

Upvotes: 1

BrunoLM
BrunoLM

Reputation: 100322

Use jQuery's attr function

$("#previous").attr("control", "-6");

An example

// Try to retrieve the control attribute
// returns undefined because the attribute doesn't exists
$("#previous").attr("control");

// Set the control attribute
$("#previous").attr("control", "-6");

// Retrieve the control attribute (-6)
$("#previous").attr("control");

See this example on jsFiddle

You can alternatively use data function to store values on elements. Works the same way, for example:

$("#previous").data("control"); // undefined
$("#previous").data("control", "-6"); // set the element data
$("#previous").data("control"); // retrieve -6

Using data you can store more complex values like objects

$("#previos").data("control", { value: -6 });
($("#previos").data("control")).value; // -6

See a data example on jsFiddle

Upvotes: 27

Jayme Tosi Neto
Jayme Tosi Neto

Reputation: 1239

Let me see if I understood you. You have, for example, the code:

<a id="previous" href="#"></a>

And by jQuery you want it to be:

<a id="previous" control="-6" href="#"></a>

Is it right? If it is. You just have to do:

$('#previous').attr('control', -6);

If an attribute doesn't exists it's created by jQuery. So, to remove it you can do:

$('#previous').removeAttr('control');

What you're doing doesn't respect the html rules and everything else, but it works fine, a lot of plugins do the same. ;D

I hope this could be helpful!

See you!

Upvotes: 2

user113716
user113716

Reputation: 322452

Since the jQuery version has been well covered here, I thought I'd offer something different, so here a native DOM API alternative:

document.getElementById('previous').setAttribute('control','-6');

Yes, I know you asked for jQuery. Never hurts to know the native way too. :o)

Upvotes: 14

davehauser
davehauser

Reputation: 5944

HTML:

<a id="previous" href="#">...</a>

jQuery:

$('#previous').attr('control', '-6');

Upvotes: 1

Adrian Godong
Adrian Godong

Reputation: 8911

$("#previous").attr("control", "-6");

Upvotes: 1

ahmet2106
ahmet2106

Reputation: 5007

Try this:

$('#previous').attr('control', '-6');

Why? the $.attr(); function of jQuery allows you to add, get or update attributes (class, id, href, link, src, control and everything else!).

Upvotes: 1

Related Questions