Build Table (v6)

Revision 6 of this benchmark created on

Preparation HTML

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

Setup

var tbjQuery = $("#table > tbody");
    var tbNative = tbjQuery[0];
    var items = [];
    
    for (var i = 0; i < 500; i++) {
      var exObj = {
        propA: "A",
        propB: "B"
      };
      items.push(exObj);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Create Element
for (var i = 0, len = items.length; i < len; i++) {
  var subElemTr = document.createElement("tr"),
    subElemTd = document.createElement("td"),
    subElemTdText = document.createTextNode(items[i].propB);

  subElemTd.appendChild(subElemTdText);
  subElemTr.appendChild(subElemTd);

  tbNative.appendChild(subElemTr);
}

tbjQuery.empty();
ready
Concatiation
var completeString;

for (var i = 0, len = items.length; i < len; i++) {
  completeString += "<tr><td>" + items[i].propB + "</td></tr>";
}

tbNative.innerHtml = completeString;

tbNative.innerHtml = "";
ready
Array join
var buffer = [];
var bufferIndex = -1;

for (var i = 0, len = items.length; i < len; i++) {
  buffer[++bufferIndex] = "<tr><td>";
  buffer[++bufferIndex] = items[i].propB;
  buffer[++bufferIndex] = "</td></tr>";
}

tbNative.innerHtml = buffer.join('');

tbNative.innerHtml = "";
ready
Create Element Document Fragment
var fragment = document.createDocumentFragment();

for (var i = 0, len = items.length; i < len; i++) {
  var subElemTr = document.createElement("tr"),
    subElemTd = document.createElement("td"),
subElemTdText = document.createTextNode(items[i].propB);

  subElemTd.appendChild(subElemTdText);
  subElemTr.appendChild(subElemTd);

  fragment.appendChild(subElemTr);
}

tbNative.appendChild(fragment);

tbjQuery.empty();
ready

Revisions

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