[html] How to store arbitrary data for some HTML tags

source: http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags

question:

How to store arbitrary data for some HTML tags

answer:

method1:

Which version of HTML are you using?

In HTML 5, it is totally valid to have custom attributes prefixed with data-, e.g.

<div data-internalid="1337"></div>

In XHTML, this is not really valid. If you are in XHTML 1.1 mode, the browser will probably complain about it, but in 1.0 mode, most browsers will just silently ignore it.

If I were you, I would follow the script based approach. You could make it automatically generated on server side so that it's not a pain in the back to maintain.

method 2:

If you are using jQuery already then you should leverage the "data" method which is the recommended method for storing arbitrary data on a dom element with jQuery.

To store something:

$('#myElId').data('nameYourData', { foo: 'bar' });

To retrieve data:

var myData = $('#myElId').data('nameYourData');

That is all that there is to it but take a look at the jQuery documentation for more info/examples.

method 3:

Just another way, I personally wouldn't use this but it works (assure your JSON is valid because eval() is dangerous).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

method 4:

So there should be four choices to do so:

1. Put the data in the id attribute.
2. Put the data in the arbitrary attribute
3. Put the data in class attribute
4. Put your data in another tag

http://www.shanison.com/?p=321

method 5:

Arbitrary attributes are not valid, but are perfectly reliable in modern browsers. If you are setting the properties via javascript, than you don't have to worry about validation as well.

An alternative is to set attributes in javascript. jQuery has a nice utility method just for that purpose, or you can roll your own.