How to add an HTML attribute with jQuery

Question

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.

Answer 1

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

Answer 2

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)

Answer 3

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!