title: using hidden elements in pages to store data
body: <p>I need to store data in html documents that are associated with elements, and that I can get to with javascript.  I think I want to avoid arbitrary attributes on elements, since after reading various posts here I don't trust them.  I can't use id or class, since I those are used for other things and I don't want to mess with them (my project has to work on wide varieties of html so I can't make any assumptions as to the design of the class and id structure).  Another thing I need is for whatever I do, it needs to survive round-tripping through innerHTML (of a parent or ancestor element of the element I need to tag with data), with data intact.</p>
  
  <p>I have considered various hidden elements (including script tags and html comments), which I insert into the document right before the element I need to tag with data.  Currently my favorite is hidden form elements (i.e. input with type "hidden").  I can stick any data I want into the "value" of the element, and I can find all such elements easily enough with getElementsByTagName().  Also importantly, it doesn't seem to affect the layout of the page.</p>
  
  <p>I'm curious about the ramifications of this, and if anyone can think of any any problems with it.  I need to be able to put them anywhere in body of the page, before any element.  For instance I might need them associated with an option element (a child of a select element), so that rules out using a hidden div, since putting one of those inside a select element is illegal. I don't think they will affect form behavior, since they don't have a name attribute (I can avoid using id's if that helps).</p>
  
  <p>Any thoughts on this, or suggestions for other ways of accomplishing the same that meets my needs?</p>