insertCell vs innerHTML string building (v3)

Revision 3 of this benchmark created by John on

Description

Calls insertCell in a loop, or builds a string and then sets innerHTML of the tr.

Preparation HTML

<table>
  <tbody>
    <tr id="row">
    </tr>
  </tbody>
</table>

Setup

var runs = 100;
    var table = document.createElement('table');
    var row = document.getElementById('row');
    //var cell;

Teardown


    row.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
insertCell
for (var i = 0; i < runs; i++) {
  var cell = row.insertCell(-1);
  var text = document.createTextNode(i)
  cell.appendChild(text);
}
ready
Build string
var str = ""

for (var i = 0; i < runs; i++) {
  str += '<td>' + i + '</td>';
}

row.innerHTML = str;
ready
createElement
for (var i = 0; i < runs; i++) {
  var cell = document.createElement('td');
  var text = document.createTextNode(i);
  cell.appendChild(text);
  row.appendChild(cell);
}
ready
Build/Join Array
var str = []

for (var i = 0; i < runs; i++) {
  str.push( '<td>' + i + '</td>');
}

row.innerHTML = str.join('');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.