Improve speed of object-to-html transform in javascript? I have a rather large javascript array of objects that I am transforming into an HTML table. Each object in the array looks like:

{
    name:'Document Title',
    url:'/path/to/document.html',
    categories:['Some Category'],
    protocols:['ID Number','Another ID'],
    sites:['Location']
}


It's possible to have multiple categories, protocols, and sites, hence why they are in arrays.

The jQuery I've written to do the transformation is:

var table = $('&lt;table class="table table-bordered table-condensed table-striped data-table"&gt;'),
    tbody = $('&lt;tbody&gt;'),
    thead = $('&lt;thead&gt;&lt;tr&gt;&lt;th width="100"&gt;Protocol&lt;/th&gt;&lt;th&gt;Report Name&lt;/th&gt;&lt;th width="140"&gt;Category&lt;/th&gt;&lt;th width="220"&gt;Site&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;');

$.each(reports,function(i,report) {
    var tr = document.createElement('tr'),
             cellProtocol = document.createElement('td'),
             cellName = document.createElement('td'),
             cellCategory = document.createElement('td'),
             cellSite = document.createElement('td'),
             reportLink = document.createElement('a');

    // If property doesn't exist, set to empty array
    report.protocols = report.protocols || [];
    report.sites = report.sites || [];
    report.categories = report.categories || [];

    reportLink.setAttribute('href',report.url);
    reportLink.appendChild(document.createTextNode(report.name));

    cellProtocol.appendChild(document.createTextNode(report.protocols.join(', ')));
    cellName.appendChild(reportLink);
    cellCategory.appendChild(document.createTextNode(report.categories.join(', ')));
    cellSite.appendChild(document.createTextNode(report.sites.join(', ')));

    tr.appendChild(cellProtocol);
    tr.appendChild(cellName);
    tr.appendChild(cellCategory);
    tr.appendChild(cellSite);

    tbody[0].appendChild(tr);
});

$('#report-table').empty().append(table.append(thead,tbody));


It currently takes about 2 seconds to transform 4200 objects into table rows and display the finished table. In the $.each loop I am using appendChild as I understand it is faster than using innerHTML or $.append.

Are there any improvements here I can make in performance?
If this is on an intranet, with similar machines running this JS, then 2 seconds is fairly ok for 4,200 records...but if its on the internet, you might want to think about doing this server side and just ajax'ing the server generated table code via js...someone running this on an iPad would probably take considerably longer to generate 4,200 records vs someone running an overclocked i7 machine for instance. Just food for thought. 

As for actual improvements to the code, I don't really see any glaring items...although someone else might want to pipe in. Seems someone already piped in :)