Question

I’d like to do something like this:

var elem = document.createElement("input");
elem.setAttribute("my-attribute", myObject);
document.getElementById("parent").appendChild(elem);

Later I will need to fetch myObject when performing some actions on this (and similar) element(s).

Note: I need this as an attribute (and not, for example, as a member of the element object, as in elem.myAttribute = myObject), as for some elements the value is a string which is hard-coded into the HTML of the page. What I need is the ability to set this attribute programmatically for other elements, and to use values which are not always plain strings.

I tried this and it worked in my browser (Firefox 14), but I need to know if this works cross-browser, and also if I’ll be able to fetch the values of such attributes using jQuery if I decide to use jQuery in my page later on.

Answer 1

No – attributes by definition store string values. The obvious approach is to store the object as a property but you say that’s not suitable.

Either:

1) Use jQuery’s data API (since it does not literally log the data on the element, so you can store whatever you want, not only strings)

2) Stringify the object and append that to the element as an HTML5 data attribute.

var elem = document.querySelector('p'),
    obj = {foo: 'bar'};
elem.setAttribute('data-myObj', JSON.stringify(obj));
/* ...then, later... */
var data = JSON.parse(elem.getAttribute('data-myObj'));

Note, though, that, because we’re dealing with JSON, you will not be able to store methods as part of this object. They will be stripped out by JSON.stringify().

Finally, using attributes means you’ll muddy your HTML since they show up in any HTML dumps (unlike properties) but this is purely a cosmetic weakness.