Table .append() occurring all at once
<p>I've got a <code>for</code> loop in which I am appending rows to a <code>table</code>.  Although I append each <code>tr</code> one at a time in the loop, the browser does not render any of them until the loop is finished.</p>

<p>At first, I thought it might be the browser rendering too quickly for me to notice, but after increasing the number of rows to, say, 10000, there's a significant slowdown, then the entire table shows at once.</p>

<p><strong>Link:</strong> <a href="http://jsfiddle.net/xyan/ad2tV/" rel="nofollow">http://jsfiddle.net/xyan/ad2tV/</a></p>

<p>Increment <code>counter</code> to increase the number of rows.</p>

<p>Also, if you change <code>counter</code> to 3 (or another small number) and uncomment the <code>alert()</code>, it will pause the loop and show each row being added one at a time.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div&gt;&lt;/div&gt;
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>var table = $('&lt;table /&gt;').appendTo($('div'));
var counter = 1000;
var html = [];
var j = 0;

for (var i = 1 ; i &lt; (counter + 1) ; i++) {
    html[j++] = '&lt;tr&gt;';
    html[j++] =    '&lt;td&gt;'+i+'-1&lt;/td&gt;&lt;td&gt;'+i+'-2&lt;/td&gt;&lt;td&gt;'+i+'-3&lt;/td&gt;';
    html[j++] = '&lt;tr&gt;';
    table.append(html.join(''));
    //alert('pause');
    html = [];
    j = 0;
}
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>    table td {
    padding: 3px;
    border: 1px solid red;
}
</code></pre>

<hr>

<p><strong>Note:</strong></p>

<p>I've found a way to force the loop to slow down, allowing the rows to be added one at a time.</p>

<p><strong>Link:</strong> <a href="http://jsfiddle.net/xyan/8SCP9/" rel="nofollow">http://jsfiddle.net/xyan/8SCP9/</a></p>

<pre><code>var html = '';
var numbertorun = 15;
var delay = 500;

(function loop (i) {          
   setTimeout(function () {   
      html = '&lt;tr&gt;&lt;td&gt;'+i+'-1&lt;/td&gt;&lt;td&gt;'+i+'-2&lt;/td&gt;&lt;/tr&gt;';              
      $('table').append(html);
      if (--i) loop(i);
   }, delay)
})(numbertorun);
</code></pre>

<hr>

<p>So I guess my question isn't <em>how</em> to do this, but <em>why</em> the rows aren't inserted one at a time in the original <code>for</code> loop.</p>
