title: Table .append() occurring all at once
body: <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>