Build Table (v3)

Revision 3 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 < 1000; i++) {
      var exObj = {
        propA: "A",
        propB: "B"
      };
      items.push(exObj);
    }

Teardown


    tbjQuery.html("");

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");
  subElemTr.setAttribute("myAttr", items[i].propA);

  var subElemTd = document.createElement("td");
  subElemTd.innerHTML = items[i].propB;

  subElemTr.appendChild(subElemTd);

  tbNative.appendChild(subElemTr);
}
ready
Concatiation
var completeString;

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

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

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

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

for (var i = 0, len = items.length; i < len; i++) {
  var subElemTr = document.createElement("tr");
  subElemTr.setAttribute("myAttr", items[i].propA);

  var subElemTd = document.createElement("td");
  subElemTd.innerHTML = items[i].propB;

  subElemTr.appendChild(subElemTd);

  fragment.appendChild(subElemTr);
}

tbNative.appendChild(fragment);
ready

Revisions

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