How to store arbitrary data for some HTML tags

Question

I m making a page which has some interaction provided by javascript  Just as an example  links which send an AJAX request to get the content of articles and then display that data in a div  Obviously in this example  I need each link to store an extra bit of information  the id of the article  The way I ve been handling it in case was to put that information in the href link this    lt a class  article  href   5  gt    I then use jQuery to find the a article elements and attach the appropriate event handler   don t get too hung up on the usability or semantics here  it s just an example   Anyway  this method works  but it smells a bit  and isn t extensible at all  what happens if the click function has more than one parameter  what if some of those parameters are optional    The immediately obvious answer was to use attributes on the element  I mean  that s what they re for  right   Kind of     lt a articleid  5  href  link for non-js-users html  gt    In my recent question I asked if this method was valid  and it turns out that short of defining my own DTD  I don t   then no  it s not valid or reliable  A common response was to put the data into the class attribute  though that might have been because of my poorly-chosen example   but to me  this smells even more  Yes it s technically valid  but it s not a great solution   Another method I d used in the past was to actually generate some JS and insert it into the page in a  lt script gt  tag  creating a struct which would associate with the object   var myData         link0             articleId   5          target     showMessage             etc               link1             articleId   13            lt a href       id  link0  gt    But this can be a real pain in butt to maintain and is generally just very messy   So  to get to the question  how do you store arbitrary pieces of information for HTML tags

User · Answer

At my previous employer  we used custom HTML tags all the time to hold info about the form elements  The catch  We knew that the user was forced to use IE   It didn t work well for FireFox at the time  I don t know if FireFox has changed this or not  but be aware that adding your own attributes to HTML elements may or may-not be supported by your reader s browser   If you can control which browser your reader is using  i e  an internal web applet for a corporation   then by all means  try it  What can it hurt  right

User · Answer

Just another way  I personally wouldn t use this but it works  assure your JSON is valid because eval   is dangerous     lt a class  article  href  link for non-js-users html  gt       lt span style  display  none   gt   id   1   title   Something   lt  span gt      Text of Link  lt  a gt      javascript var article   document getElementsByClassName  article   0   var data   eval article childNodes 0  innerHTML

User · Answer

This is how I do you ajax pages    its a pretty easy method         function ajax urls            var objApps    ads   user               a ajx   each function                   var url     this  attr  href                   for   var i 0 i lt  objApps length i                          if  url indexOf     objApps i       gt -1                            this  attr  href  url replace     objApps i          objApps i     p                                                               How this works is it basically looks at all URLs that have the class  ajx  and it replaces a keyword and adds the   sign    so if js is turned off then the urls would act as they normally do    all  apps   each section of the site  has its own keyword    so all i need to do is add to the js array above to add more pages     So for example my current settings are set to    var objApps    ads   user      So if i have a url such as   www domain com ads 3923 bla dada bla  the js script would replace the  ads  part so my URL would end up being  www domain com ads  p 3923 bla dada bla  Then I use jquery bbq plugin to load the page accordingly     http   benalman com projects jquery-bbq-plugin

User · Answer

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

User · Answer

Just another way  I personally wouldn t use this but it works  assure your JSON is valid because eval   is dangerous     lt a class  article  href  link for non-js-users html  gt       lt span style  display  none   gt   id   1   title   Something   lt  span gt      Text of Link  lt  a gt      javascript var article   document getElementsByClassName  article   0   var data   eval article childNodes 0  innerHTML

User · Answer

A hack that s going to work with pretty much every possible browser is to use open classes like this   lt a class  data  articleid  5  href  link for non-js-users html gt     This is not all that elegant to the purists  but it s universally supported  standard-compliant  and very easy to manipulate  It really seems like the best possible method  If you serialize  modify  copy your tags  or do pretty much anything else  data will stay attached  copied etc    The only problem is that you cannot store non-serializable objects that way  and there might be limits if you put something really huge there   A second way is to use fake attributes like   lt a articleid  5  href  link for non-js-users html  gt    This is more elegant  but breaks standard  and I m not 100  sure about support  Many browsers support it fully  I think IE6 supports JS access for it but not CSS selectors  which doesn t really matter here   maybe some browsers will be completely confused  you need to check it    Doing funny things like serializing and deserializing would be even more dangerous   Using ids to pure JS hash mostly works  except when you try to copy your tags  If you have tag  lt a href       id  link0  gt   copy it via standard JS methods  and then try to modify data attached to just one copy  the other copy will be modified    It s not a problem if you don t copy tags  or use read only data  If you copy tags and they re modified you ll need to handle that manually

User · Answer

In html  we can store custom attributes with the prefix  data-  before the attribute name like    lt p data-animal  dog  gt This animal is a dog  lt  p gt   Check documentation  We can use this property to dynamically set and get attributes using jQuery like  If we have a p tag like   lt p id  animal  gt This animal is a dog  lt  p gt   Then to create an attribute called  breed  for the above tag  we can write       animal   attr  data-breed    pug     To retrieve the data anytime  we can write   var breedtype       animal   data  breed

User · Answer

So there should be four choices to do so    Put the data in the id attribute  Put the data in the arbitrary attribute Put the data in class attribute Put your data in another tag   http   www shanison com  p 321

User · Answer

I have found the metadata plugin to be an excellent solution to the problem of storing arbitrary data with the html tag in a way that makes it easy to retrieve and use with jQuery    Important  The actual file you include is is only 5 kb and not 37 kb  which is the size of the complete download package   Here is an example of it being used to store values I use when generating a google analytics tracking event  note  data label and data value happen to be optional params     function            each     ga-event    function  index  value              value  click function                  var data     value  metadata                if  data label  amp  amp  data value                     gaq push    trackEvent   data category  data action  data label  data value                  else if  data label                     gaq push    trackEvent   data category  data action  data label                  else                    gaq push    trackEvent   data category  data action                                            lt input class  ga-event  category  button   action  click   label  test   value 99   type  button  value  Test   gt

User · Answer

One possibility might be    Create a new div to hold all the extended arbitrary data Do something to ensure that this div is invisible  e g  CSS plus a class attribute of the div  Put the extended arbitrary data within  X HTML tags  e g  as text within cells of a table  or anything else you might like  within this invisible div

User · Answer

At my previous employer  we used custom HTML tags all the time to hold info about the form elements  The catch  We knew that the user was forced to use IE   It didn t work well for FireFox at the time  I don t know if FireFox has changed this or not  but be aware that adding your own attributes to HTML elements may or may-not be supported by your reader s browser   If you can control which browser your reader is using  i e  an internal web applet for a corporation   then by all means  try it  What can it hurt  right

User · Answer

Why not make use of the meaningful data already there  instead of adding arbitrary data   i e  use  lt a href   articles 5 page-title  class  article-link  gt   and then you can programmatically get all article links on the page  via the classname  and the article ID  matching the regex  articles    d    against this href

User · Answer

I have found the metadata plugin to be an excellent solution to the problem of storing arbitrary data with the html tag in a way that makes it easy to retrieve and use with jQuery    Important  The actual file you include is is only 5 kb and not 37 kb  which is the size of the complete download package   Here is an example of it being used to store values I use when generating a google analytics tracking event  note  data label and data value happen to be optional params     function            each     ga-event    function  index  value              value  click function                  var data     value  metadata                if  data label  amp  amp  data value                     gaq push    trackEvent   data category  data action  data label  data value                  else if  data label                     gaq push    trackEvent   data category  data action  data label                  else                    gaq push    trackEvent   data category  data action                                            lt input class  ga-event  category  button   action  click   label  test   value 99   type  button  value  Test   gt

User · Answer

I know that you re currently using jQuery  but what if you defined the onclick handler inline   Then you could do     lt a href   link for non-js-users htm  onclick  loadContent 5  return false   gt       Article 5 lt  a gt

User · Answer

In html  we can store custom attributes with the prefix  data-  before the attribute name like    lt p data-animal  dog  gt This animal is a dog  lt  p gt   Check documentation  We can use this property to dynamically set and get attributes using jQuery like  If we have a p tag like   lt p id  animal  gt This animal is a dog  lt  p gt   Then to create an attribute called  breed  for the above tag  we can write       animal   attr  data-breed    pug     To retrieve the data anytime  we can write   var breedtype       animal   data  breed

User · Answer

A hack that s going to work with pretty much every possible browser is to use open classes like this   lt a class  data  articleid  5  href  link for non-js-users html gt     This is not all that elegant to the purists  but it s universally supported  standard-compliant  and very easy to manipulate  It really seems like the best possible method  If you serialize  modify  copy your tags  or do pretty much anything else  data will stay attached  copied etc    The only problem is that you cannot store non-serializable objects that way  and there might be limits if you put something really huge there   A second way is to use fake attributes like   lt a articleid  5  href  link for non-js-users html  gt    This is more elegant  but breaks standard  and I m not 100  sure about support  Many browsers support it fully  I think IE6 supports JS access for it but not CSS selectors  which doesn t really matter here   maybe some browsers will be completely confused  you need to check it    Doing funny things like serializing and deserializing would be even more dangerous   Using ids to pure JS hash mostly works  except when you try to copy your tags  If you have tag  lt a href       id  link0  gt   copy it via standard JS methods  and then try to modify data attached to just one copy  the other copy will be modified    It s not a problem if you don t copy tags  or use read only data  If you copy tags and they re modified you ll need to handle that manually

User · Answer

Which version of HTML are you using   In HTML 5  it is totally valid to have custom attributes prefixed with data-  e g    lt div data-internalid  1337  gt  lt  div gt    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

User · Answer

One possibility might be    Create a new div to hold all the extended arbitrary data Do something to ensure that this div is invisible  e g  CSS plus a class attribute of the div  Put the extended arbitrary data within  X HTML tags  e g  as text within cells of a table  or anything else you might like  within this invisible div

User · Answer

A hack that s going to work with pretty much every possible browser is to use open classes like this   lt a class  data  articleid  5  href  link for non-js-users html gt     This is not all that elegant to the purists  but it s universally supported  standard-compliant  and very easy to manipulate  It really seems like the best possible method  If you serialize  modify  copy your tags  or do pretty much anything else  data will stay attached  copied etc    The only problem is that you cannot store non-serializable objects that way  and there might be limits if you put something really huge there   A second way is to use fake attributes like   lt a articleid  5  href  link for non-js-users html  gt    This is more elegant  but breaks standard  and I m not 100  sure about support  Many browsers support it fully  I think IE6 supports JS access for it but not CSS selectors  which doesn t really matter here   maybe some browsers will be completely confused  you need to check it    Doing funny things like serializing and deserializing would be even more dangerous   Using ids to pure JS hash mostly works  except when you try to copy your tags  If you have tag  lt a href       id  link0  gt   copy it via standard JS methods  and then try to modify data attached to just one copy  the other copy will be modified    It s not a problem if you don t copy tags  or use read only data  If you copy tags and they re modified you ll need to handle that manually

User · Answer

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

User · Answer

Which version of HTML are you using   In HTML 5  it is totally valid to have custom attributes prefixed with data-  e g    lt div data-internalid  1337  gt  lt  div gt    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

User · Answer

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

User · Answer

Using jquery   to store      element id   data  extra tag    extra info     to retrieve      element id   data  extra tag

User · Answer

You could use hidden input tags  I get no validation errors at w3 org with this    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html lang  en  xml lang  en  xmlns  http   www w3 org 1999 xhtml  gt     lt head gt       lt meta content  text html charset UTF-8  http-equiv  content-type    gt       lt title gt Hello lt  title gt     lt  head gt     lt body gt       lt div gt         lt a class  article  href  link for non-js-users html  gt           lt input style  display  none  name  articleid  type  hidden  value  5    gt         lt  a gt       lt  div gt     lt  body gt   lt  html gt    With jQuery you d get the article ID with something like  not tested        article input name articleid    val      But I d recommend HTML5 if that is an option

User · Answer

At my previous employer  we used custom HTML tags all the time to hold info about the form elements  The catch  We knew that the user was forced to use IE   It didn t work well for FireFox at the time  I don t know if FireFox has changed this or not  but be aware that adding your own attributes to HTML elements may or may-not be supported by your reader s browser   If you can control which browser your reader is using  i e  an internal web applet for a corporation   then by all means  try it  What can it hurt  right

User · Answer

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

User · Answer

At my previous employer  we used custom HTML tags all the time to hold info about the form elements  The catch  We knew that the user was forced to use IE   It didn t work well for FireFox at the time  I don t know if FireFox has changed this or not  but be aware that adding your own attributes to HTML elements may or may-not be supported by your reader s browser   If you can control which browser your reader is using  i e  an internal web applet for a corporation   then by all means  try it  What can it hurt  right

User · Answer

Another approach can be to store a key value pair as a simple class using the following syntax     lt div id  my div  class  foo  bar   gt     lt  div gt    This is valid and can easily be retrieved with jQuery selectors or a custom made function

User · Answer

I know that you re currently using jQuery  but what if you defined the onclick handler inline   Then you could do     lt a href   link for non-js-users htm  onclick  loadContent 5  return false   gt       Article 5 lt  a gt

User · Answer

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

User · Answer

I know that you re currently using jQuery  but what if you defined the onclick handler inline   Then you could do     lt a href   link for non-js-users htm  onclick  loadContent 5  return false   gt       Article 5 lt  a gt

User · Answer

One possibility might be    Create a new div to hold all the extended arbitrary data Do something to ensure that this div is invisible  e g  CSS plus a class attribute of the div  Put the extended arbitrary data within  X HTML tags  e g  as text within cells of a table  or anything else you might like  within this invisible div

User · Answer

Another approach can be to store a key value pair as a simple class using the following syntax     lt div id  my div  class  foo  bar   gt     lt  div gt    This is valid and can easily be retrieved with jQuery selectors or a custom made function

User · Answer

I advocate use of the  rel  attribute  The XHTML validates  the attribute itself is rarely used  and the data is efficiently retrieved

User · Answer

As long as you re actual work is done serverside  why would you need custom information in the html tags in the output anyway  all you need to know back on the server is an index into whatever kind of list of structures with your custom info  I think you re looking to store the information in the wrong place    I will recognize  however unfortunate  that in lots of cases the right solution isn t the right solution  In which case I would strongly suggest generating some javascript to hold the extra information   Many years later   This question was posted roughly three years before data-    attributes became a valid option with the advent of html 5 so the truth has shifted and the original answer I gave is no longer relevant  Now I d suggest to use data attributes instead    lt a data-articleId  5  href  link for non-js-users html  gt    lt script gt      let anchors   document getElementsByTagName  a        for  let anchor of anchors            let articleId   anchor dataset articleId         lt  script gt

User · Answer

Which version of HTML are you using   In HTML 5  it is totally valid to have custom attributes prefixed with data-  e g    lt div data-internalid  1337  gt  lt  div gt    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

User · Answer

Why not make use of the meaningful data already there  instead of adding arbitrary data   i e  use  lt a href   articles 5 page-title  class  article-link  gt   and then you can programmatically get all article links on the page  via the classname  and the article ID  matching the regex  articles    d    against this href

User · Answer

Using jquery   to store      element id   data  extra tag    extra info     to retrieve      element id   data  extra tag

User · Answer

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

User · Answer

Just another way  I personally wouldn t use this but it works  assure your JSON is valid because eval   is dangerous     lt a class  article  href  link for non-js-users html  gt       lt span style  display  none   gt   id   1   title   Something   lt  span gt      Text of Link  lt  a gt      javascript var article   document getElementsByClassName  article   0   var data   eval article childNodes 0  innerHTML

User · Answer

Which version of HTML are you using   In HTML 5  it is totally valid to have custom attributes prefixed with data-  e g    lt div data-internalid  1337  gt  lt  div gt    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

User · Answer

Why not make use of the meaningful data already there  instead of adding arbitrary data   i e  use  lt a href   articles 5 page-title  class  article-link  gt   and then you can programmatically get all article links on the page  via the classname  and the article ID  matching the regex  articles    d    against this href

User · Answer

I advocate use of the  rel  attribute  The XHTML validates  the attribute itself is rarely used  and the data is efficiently retrieved

User · Answer

This is how I do you ajax pages    its a pretty easy method         function ajax urls            var objApps    ads   user               a ajx   each function                   var url     this  attr  href                   for   var i 0 i lt  objApps length i                          if  url indexOf     objApps i       gt -1                            this  attr  href  url replace     objApps i          objApps i     p                                                               How this works is it basically looks at all URLs that have the class  ajx  and it replaces a keyword and adds the   sign    so if js is turned off then the urls would act as they normally do    all  apps   each section of the site  has its own keyword    so all i need to do is add to the js array above to add more pages     So for example my current settings are set to    var objApps    ads   user      So if i have a url such as   www domain com ads 3923 bla dada bla  the js script would replace the  ads  part so my URL would end up being  www domain com ads  p 3923 bla dada bla  Then I use jquery bbq plugin to load the page accordingly     http   benalman com projects jquery-bbq-plugin

User · Answer

So there should be four choices to do so    Put the data in the id attribute  Put the data in the arbitrary attribute Put the data in class attribute Put your data in another tag   http   www shanison com  p 321

User · Answer

As long as you re actual work is done serverside  why would you need custom information in the html tags in the output anyway  all you need to know back on the server is an index into whatever kind of list of structures with your custom info  I think you re looking to store the information in the wrong place    I will recognize  however unfortunate  that in lots of cases the right solution isn t the right solution  In which case I would strongly suggest generating some javascript to hold the extra information   Many years later   This question was posted roughly three years before data-    attributes became a valid option with the advent of html 5 so the truth has shifted and the original answer I gave is no longer relevant  Now I d suggest to use data attributes instead    lt a data-articleId  5  href  link for non-js-users html  gt    lt script gt      let anchors   document getElementsByTagName  a        for  let anchor of anchors            let articleId   anchor dataset articleId         lt  script gt

User · Answer

Why not make use of the meaningful data already there  instead of adding arbitrary data   i e  use  lt a href   articles 5 page-title  class  article-link  gt   and then you can programmatically get all article links on the page  via the classname  and the article ID  matching the regex  articles    d    against this href

User · Answer

As a jQuery user I would use the Metadata plugin  The HTML looks clean  it validates  and you can embed anything that can be described using JSON notation

User · Answer

One possibility might be    Create a new div to hold all the extended arbitrary data Do something to ensure that this div is invisible  e g  CSS plus a class attribute of the div  Put the extended arbitrary data within  X HTML tags  e g  as text within cells of a table  or anything else you might like  within this invisible div

User · Answer

You could use hidden input tags  I get no validation errors at w3 org with this    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html lang  en  xml lang  en  xmlns  http   www w3 org 1999 xhtml  gt     lt head gt       lt meta content  text html charset UTF-8  http-equiv  content-type    gt       lt title gt Hello lt  title gt     lt  head gt     lt body gt       lt div gt         lt a class  article  href  link for non-js-users html  gt           lt input style  display  none  name  articleid  type  hidden  value  5    gt         lt  a gt       lt  div gt     lt  body gt   lt  html gt    With jQuery you d get the article ID with something like  not tested        article input name articleid    val      But I d recommend HTML5 if that is an option

User · Answer

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

User · Answer

You could use the data- prefix of your own made attribute of a random element   lt span data-randomname  Data goes here     gt  lt  span gt    but this is only valid in HTML5  Thus browsers may complain about validity   You could also use a  lt span style  display  none   gt Data goes here    lt  span gt  tag  But this way you can not use the attribute functions  and if css and js is turned off  this is not really a neat solution either   But what I personally prefer is the following    lt input type  hidden  title  Your key     value  Your value       gt    The input will in all cases be hidden  the attributes are completely valid  and it will not get sent if it is within a  lt form gt  tag  since it has not got any name  right  Above all  the attributes are really easy to remember and the code looks nice and easy to understand  You could even put an ID-attribute in it  so you can easily access it with JavaScript as well  and access the key-value pair with input title  input value

User · Answer

You could use the data- prefix of your own made attribute of a random element   lt span data-randomname  Data goes here     gt  lt  span gt    but this is only valid in HTML5  Thus browsers may complain about validity   You could also use a  lt span style  display  none   gt Data goes here    lt  span gt  tag  But this way you can not use the attribute functions  and if css and js is turned off  this is not really a neat solution either   But what I personally prefer is the following    lt input type  hidden  title  Your key     value  Your value       gt    The input will in all cases be hidden  the attributes are completely valid  and it will not get sent if it is within a  lt form gt  tag  since it has not got any name  right  Above all  the attributes are really easy to remember and the code looks nice and easy to understand  You could even put an ID-attribute in it  so you can easily access it with JavaScript as well  and access the key-value pair with input title  input value

User · Answer

Just another way  I personally wouldn t use this but it works  assure your JSON is valid because eval   is dangerous     lt a class  article  href  link for non-js-users html  gt       lt span style  display  none   gt   id   1   title   Something   lt  span gt      Text of Link  lt  a gt      javascript var article   document getElementsByClassName  article   0   var data   eval article childNodes 0  innerHTML

User · Answer

This is good advice   Thanks to  Prestaul     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    Very true  but what if you want to store arbitrary data in plain-old HTML   Here s yet another alternative      lt input type  hidden  name  whatever  value  foobar   gt    Put your data in the name and value attributes of a hidden input element   This might be useful if the server is generating HTML  i e  a PHP script or whatever   and your JavaScript code is going to use this information later   Admittedly  not the cleanest  but it s an alternative   It s compatible with all  browsers and is valid XHTML   You should NOT use custom attributes  nor should you really use attributes with the  data-  prefix  as it might not work on all browsers   And  in addition  your document will not pass W3C validation

User · Answer

This is good advice   Thanks to  Prestaul     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    Very true  but what if you want to store arbitrary data in plain-old HTML   Here s yet another alternative      lt input type  hidden  name  whatever  value  foobar   gt    Put your data in the name and value attributes of a hidden input element   This might be useful if the server is generating HTML  i e  a PHP script or whatever   and your JavaScript code is going to use this information later   Admittedly  not the cleanest  but it s an alternative   It s compatible with all  browsers and is valid XHTML   You should NOT use custom attributes  nor should you really use attributes with the  data-  prefix  as it might not work on all browsers   And  in addition  your document will not pass W3C validation

User · Answer

As long as you re actual work is done serverside  why would you need custom information in the html tags in the output anyway  all you need to know back on the server is an index into whatever kind of list of structures with your custom info  I think you re looking to store the information in the wrong place    I will recognize  however unfortunate  that in lots of cases the right solution isn t the right solution  In which case I would strongly suggest generating some javascript to hold the extra information   Many years later   This question was posted roughly three years before data-    attributes became a valid option with the advent of html 5 so the truth has shifted and the original answer I gave is no longer relevant  Now I d suggest to use data attributes instead    lt a data-articleId  5  href  link for non-js-users html  gt    lt script gt      let anchors   document getElementsByTagName  a        for  let anchor of anchors            let articleId   anchor dataset articleId         lt  script gt

User · Answer

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

User · Answer

As long as you re actual work is done serverside  why would you need custom information in the html tags in the output anyway  all you need to know back on the server is an index into whatever kind of list of structures with your custom info  I think you re looking to store the information in the wrong place    I will recognize  however unfortunate  that in lots of cases the right solution isn t the right solution  In which case I would strongly suggest generating some javascript to hold the extra information   Many years later   This question was posted roughly three years before data-    attributes became a valid option with the advent of html 5 so the truth has shifted and the original answer I gave is no longer relevant  Now I d suggest to use data attributes instead    lt a data-articleId  5  href  link for non-js-users html  gt    lt script gt      let anchors   document getElementsByTagName  a        for  let anchor of anchors            let articleId   anchor dataset articleId         lt  script gt

User · Answer

I know that you re currently using jQuery  but what if you defined the onclick handler inline   Then you could do     lt a href   link for non-js-users htm  onclick  loadContent 5  return false   gt       Article 5 lt  a gt

User · Answer

A hack that s going to work with pretty much every possible browser is to use open classes like this   lt a class  data  articleid  5  href  link for non-js-users html gt     This is not all that elegant to the purists  but it s universally supported  standard-compliant  and very easy to manipulate  It really seems like the best possible method  If you serialize  modify  copy your tags  or do pretty much anything else  data will stay attached  copied etc    The only problem is that you cannot store non-serializable objects that way  and there might be limits if you put something really huge there   A second way is to use fake attributes like   lt a articleid  5  href  link for non-js-users html  gt    This is more elegant  but breaks standard  and I m not 100  sure about support  Many browsers support it fully  I think IE6 supports JS access for it but not CSS selectors  which doesn t really matter here   maybe some browsers will be completely confused  you need to check it    Doing funny things like serializing and deserializing would be even more dangerous   Using ids to pure JS hash mostly works  except when you try to copy your tags  If you have tag  lt a href       id  link0  gt   copy it via standard JS methods  and then try to modify data attached to just one copy  the other copy will be modified    It s not a problem if you don t copy tags  or use read only data  If you copy tags and they re modified you ll need to handle that manually

User · Answer

As a jQuery user I would use the Metadata plugin  The HTML looks clean  it validates  and you can embed anything that can be described using JSON notation

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

Examples related to javascript

Examples related to html