Build HTML String

Benchmark created on

Preparation HTML

<ul id="list" style="display:none;"></ul>

Setup

var arr = ['item 1', 'item 2', 'item 3'];

Test runner

Ready to run.

Testing in
TestOps/sec
for-loop
var list = '';
 
for (var i = 0, l = arr.length; i < l; i++) {
    list += '<li>' + arr[i] + '</li>';
}
 
list = '<ul>' + list + '</ul>';
ready
foor-loop-join
var list = [];
 
for (var i = 0, l = arr.length; i < l; i++) {
    list[list.length] = '<li>' + arr[i] + '</li>';
}
 
list = '<ul>' + list.join('') + '</ul>';
ready
join-only
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
ready
DOM-DIRECT
for (var i = 0, l = arr.length; i < l; i++) {
    var newLI = document.createElement('li');
    var liNummer = i + 1;
    var newLIText = document.createTextNode(arr[i]);
    document.getElementById('list').appendChild(newLI);
    document.getElementsByTagName("li")[i].appendChild(newLIText);
}
ready

Revisions

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