14

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.

Improve this question

7 Answers 7

Reset to default
27

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The right answer. However, I am against using data(), I don't think html nodes are the proper place to store data, that's mixing V and M. I always create a model object that is used to maintain any common data on the screen. However, it's useful for small apps and light page enhancements
14

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)

Improve this answer

Comments

2

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!

Improve this answer

2 Comments

can you give an example of a rule not being respected?
HTML rules to the letter doesn't accept custom tag attributes. Try using the W3C Validator validator.w3.org. Nothing to worry about, they just work fine. The problem is that your custom attributes may conflict with plugins' custom ones, or even with some new ones.
1

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!).

Improve this answer

Comments

1 
$("#previous").attr("control", "-6");
Improve this answer

Comments

1

HTML:

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

jQuery:

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

Comments

1

jQuery's attr will do that. Example:

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

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.