How to Store Arbitrary Data For Some HTML Tags

How to store arbitrary data for some HTML tags

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.

Storing arbitrary data in HTML

HTML5 now supports the data-name syntax for storing abitrary data without non-standard custom attributes

This will of course break validation if your doctype is anything other than HTML5 (although there are ways around this) but it wont affect the rendering or parsing in any browsers I've come across.

Here is an excellent article by John Resig on the matter

Storing arbitrary info in HTML tags for JavaScript?

You could find out which tabbed element a field belongs to by writing an isChildOf function, like this: http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

Using the DOM to work this out will always be more "elegant" than duplicating the data in some custom format.

HTML tag specifically for storing arbitrary data

I use data-* attributes, and try to find and attach them to already existing related elements. This convention is also used by asp.net mvc framework itself - when link target needs to be loaded, data-ajax-* is attached to anchors. When you need to set update target of form submit, you attach data-ajax-* to form, so in most cases it is possible to find good candidate for it. If it is not possible in any particular case, I do not see problems using body instead.

How to store arbitrary data in Html tags within each loop?

Instead of concatenating your html, build it up and add separate data elements for each key/value in your data:

var data_obj = [{  name: "foo",  age: 33}, {  name: "goo",  age: 34}];
var count = 0;var lis = [];$.each(data_obj, function() {
   var $li = $('<li />');   $.each(this, function(k,v){      $li.data(k,v);   })  count++;  $li.text(count)  lis.push($li)});
$('#res').append($('<ul>').append(lis))$('ul li').on('click',function(){   console.log($(this).data('name') + ":" + $(this).data('age'))});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="res"></div>

What is the purpose of storing custom data on HTML data attributes?

One use case I currently used was I created a component in react and used pseudo elements to take data from data attribute ie. data-title value will be taken by CSS in content: attr(data-title) so what ever value I am passing to component shows directly via css and also there are so many use cases for eg you need some value to be instead of passing whole object on click function you just add click event and it will take values from data attributes instead.

These two use cases I can think of rite now.

----------- UPDATE ---------------

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM, hacks can make your HTML invalid in many cases or create unknown bugs. Common attributes that we use are class, id etc and for custom attributes you can use data-*. The main motivation behind introduction of data attribute is to allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM. So when you ask what's better approach you, all you can think about is there are multiple ways to achieve same thing and it's subjective to developer to take approch.

Is it best practice to store data in HTML tags that don't have any content?

It is designed for this in HTML5.
More about data-* here: http://www.w3schools.com/tags/att_global_data.asp

Alternatively you could do:

<script>
     var store = {
          "myStoreId": 1234,
          "myOterStoreId": 9876,
     }
</script>

Access it by:

store["mystoreId"]

for (storeId in store) {
    var idNumber = store[storeId]
}

EDIT: Maybe you simple want an Array of "storeIds" ? Do it like that:

<script>
     var store = [
          1234,
          9876,
     ]
</script>

Access it by:

store[index]

for (var i = 0; i < store.length; ++i) {
    var idNumber = store[0]
}

A HTML tag to store javascript's data?

Creating Custom tag

var xFoo = document.createElement('placeholder');
xFoo.innerHTML = "TEST";
document.body.appendChild(xFoo);

Output:

<placeholder>TEST</placeholder>

DEMO

Note: However creating hidden input fields with unique ID is good practice.

How to Store Arbitrary Data For Some HTML Tags