Info

Appending to the DOM, building using jQuery or standard HTML

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <div style="height: 200px; overflow: auto;">
  <table id="demo">
    <thead>
      <tr>
        <th>Name</th>
        <th>Company</th>
        <th>Admin</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  </div>
<script>
  Benchmark.prototype.setup = function() {
    var rows = 50, $table = $('#demo'), row;
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

for ( var i=0; i < rows; i++ ) {
    var $newRow = $('<tr />');
    var $fRow = $newRow.append($('<td />').text('Jim'));
    var $sRow = $newRow.append($('<td />').text('Testing'));
    var $tRow = $newRow.append($('<td />').text('No'));
    var $foRow = $newRow.append($('<td />').text('Delete'));
    
   
    $table.append($newRow);
  }

 for ( var i=0; i < rows; i++ ) {
    row = '<tr><td>Jim</td>'
    row += '<td>Testing</td>'
    row += '<td>No</td>'
    row += '<td>Delete</td></tr>'
       
    $table.append(row);
 }

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Matthew on 2nd March 2013
• Revision 2: published on 4th March 2013

0 comments