How to improve performance when rendering html element composed of millions of elements?
<p>I am using jquery in a webapp that is basically a hex viewer.  I put each byte in it's own element (just a &lt;i&gt; tag) with a unique id (the offset in the file), so I can easily reference it.  I basically end up with:</p>

<pre><code>var str = 
  "&lt;i id=h0&gt;00 &lt;/i&gt;" +
  "&lt;i id=h1&gt;00 &lt;/i&gt;" + 
  "&lt;i id=h3&gt;00 &lt;/i&gt;" +
  "...";
$("#myid").html(str);
</code></pre>

<p>Setting that html line takes about 3 seconds, when that str has 100K tags (I build the str var differently, so don't comment on that, I just wrote it that way here for clarity and it is not the problem).  </p>

<p>Is it possible to improve the performance of this while maintaining an easy way to reference each of the bytes displayed?  I'd like to keep each byte in a tag so I can easily set it's background color, among other things.  The only alternative I can think of is just to load part of the file at a time (keep only 10,000 tags in that str variable).</p>
