title: How can I further optimize javascript table row creation/insertion?
body: <p>I'm using jQuery.  I have website feature that does an ajax search and returns a JSON result.  The ajax callback then populates the rows of a table with the results.  Generally, there are 100 rows per search that get inserted.  Each row has a fair amount of data.</p>
  
  <p>The code looks something like this (very much abbreviated):</p>
  
  <pre><code>function search() {
  
    $.post("/search.php", { params: search_params }, searchDone, "json");
  
  }
  
  function searchDone(json) {
  
      var $table = $("#result_table");
      var html = "";
      for(i=0; i &lt; json.results.length; i++) {
  
         html += rowHtml(results[i]);
  
      }
  
      $table.append(html);
  
  }
  
  function rowHtml(result) { /* much simplified version */
  
    var html = "&lt;tr&gt;&lt;td&gt;";
    html += result.field1;
    html += "&lt;/td&gt;&lt;td&gt;";
    html += result.field2;
    html += "&lt;/td&gt;&lt;/tr&gt;";
    return html;
  
  }
  </code></pre>
  
  <p>The performance is slow.  The browser tends to lock up when the html is appended to the table.</p>
  
  <p>Any advice on how to optimize this?  Would it be better for me to create the dom nodes rather than try to get jQuery to render the HTML?</p>