title: Javascript Effectively Build Table From JSON and Add It to DOM
body: <p>I have a JSON array coming in from the server with an array of 200 objects each containing another 10 objects that I want to display in a table format. At first I was creating a <code>&lt;tr&gt;</code> for each iteration and using jQuery to append a <code>&lt;td&gt;</code> built from the array values to the <code>&lt;tr&gt;</code>. This was taking around 30 seconds in Chrome and 19 seconds in IE 8. This was taking too long so I tried switching to the <code>Array.join()</code> method, where I would store each string that would make up the entire table in an array, and at the end do <code>$('#myTable').append(textToAppend)</code>. This actually performed worse than my first version by around 5 seconds. </p>
  
  <p>I would like to get this to around 10 seconds. Do I have any chance at that? If not, I'm just gonna add one row at a time, but I'd rather not do that.</p>
  
  <pre><code>for(allIndex = 0; allIndex &lt; entries.alumnus.length; allIndex++){
  
    var entry = '&lt;tr id="entry' + allIndex + '" class="entry"&gt;&lt;/tr&gt;';
    $('#content_table').append(entry);
  
    $('#entry' + allIndex).append(($.trim(entries.alumnus[allIndex].title) != '' ?
          '&lt;td id="title' + allIndex + '" class="cell"&gt;&lt;span class="content"&gt;' +
           entries.alumnus[allIndex].title + '&lt;/span&gt;&lt;/td&gt;' : '&lt;td width="5%"&gt;' + 
           filler + '&lt;/td&gt;'));    
    .
    .
    .
    .//REST OF ELEMENTS
    .
    .
    .
  }   
  </code></pre>
  
  <p><strong>UPDATE:</strong> I must have messed something up yesterday, because I went back to trying appending elements out of the DOM and then attaching them later, without using jQuery and I've gotten my time down to 85 ms in Chrome and 450 ms in IE7!!! You guys are awesome!!! I gave user1 the answer because that one was more comprehensive, and using fragments didn't really change my times much in Chrome and added around 20ms in IE7. But I still appreciate @Emre Erkan's answer, and will utilize more often :)                                                              </p>