title: Prefer id attribute or data attribute in page with many elements?
body: <p>I'm creating a HTML page with many, many "widgets" (can be in the magnitude of 1000, many not visible by <code>display:none</code> which get's modified dynamically by user interaction).<br>
  Each widget must carry some information regarding it.</p>
  
  <p>At the moment I'm building that DOM piece by piece and add a jQuery <code>.data()</code> to each widget. But this building of little blocks is too slow (lots of time spent in Parse HTML), so I want to switch to a new approach where I first build a string of all widgets and then add that to the DOM with <code>innerHTML</code> at one go. But this doesn't allow me to use the <code>.data()</code> during the build anymore.</p>
  
  <p>As all widgets have a unique ID anyway (currently only stored in the <code>.data()</code>...) I could think of two obvious solutions:</p>
  
  <ol>
  <li>Give every widget an <code>id</code> attribute with the widget ID as content</li>
  <li>Give every widget an <code>data-widgetid</code> attribute with the ID as content</li>
  </ol>
  
  <p>(Parallel to that I'd have a big JavaScript hash that links the widget-id to the per widget data.)</p>
  
  <p>What approach should I prefer?</p>
  
  <p>Performance and resources is an issue (also on mobile devices).<br>
  By the <code>id</code> attribute I'm interfering with the DOM, so I don't know if that could have any negative effects. (E.g. it could be that browsers are starting to build an extra look up structure for that internally that I could avoid otherwise. I'm not a browser developer, so I don't know if that is the case though)</p>