Build Table

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 = new Object();
        exObj.propA = "A";
        exObj.propB = "B";
    items.push(exObj);
    }
    
    tbjQuery.html("");

Test runner

Ready to run.

Testing in
TestOps/sec
Create Element
for (var i = 0; i < items.length; 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; i < items.length; i++) {
        completeString += "<tr myAttr=\"" + items[i].propA + "\"><td>" + items[i].propB + "</td></tr>";
}

tbjQuery.html(completeString);
ready
Array join
var buffer = [];
var bufferIndex = 0;

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

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

for (var i = 0; i < items.length; 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.