How can I add a custom attribute to a and read it in JavaScript?

Question

I want to have a jQuery/PHP site that uses <span> elements for the navigation links. I need to have a value attribute to use

$(".navLink").click(function() {
    window.location.href = "/index.php?page=" + this.value //or whatever
});

I can't use this.id because it conflicts with other HTML elements. Is there any way to create and use a "dummy" HTML attribute?

Answer 1

Use a data-* attribute. Something like data-href would be good. jQuery gives you a nice interface for reading the values.

this.data('href')

will read the value of

data-href="some.value"

See http://api.jquery.com/jquery.data/ for more.

Answer 2

You can use data-. So in your HTML, you'd define it like:

<span class="navLink" data-link="google.com">click me</span>

And then via jQuery you just do:

window.location.href = "/index.php?page=" + $(this).data("link");

Answer 3

pure js:

el.setAttribute('value', the-value);

jquery:

$(el).attr('value', the-value);

but better make something easily recognisable like my-value as a name of your attributes, to avoid conflicts and make them easier to notice in the code