jQuery DOM Manipulation (v5)

Revision 5 of this benchmark created on

Preparation HTML

<div id="my_lists" style="height: 0; overflow: hidden;">
    <ul id="list_one"></ul>
    <ul id="list_two"></ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var $myLists = $('#my_lists'),
      $listOne = $('#list_one'),
      $listTwo = $('#list_two');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Append in loop
for (i = 0; i < 100; i++) {
 $listOne.append('<li>This is list item ' + i + '</li>');
}
ready
Append outside of loop
var items = [];

for (i = 0; i < 100; i++) {
 items.push('<li>This is list item ' + i + '</li>');
}

$listTwo.html(items.join(''));
ready
Append wrapped elements
var items = [];

for (i = 0; i < 100; i++) {
 items.push('<li>This is list item ' + i + '</li>');
}

$myLists.html('<ul>' + items.join('') + '</ul>');
ready
append-string-innerhtml
var html = '';

for (i = 0; i < 100; i++) {
 html += '<li>This is list item ' + i + '</li>';
}

$listOne[0].innerHTML = html;
ready
append-string
var html = '';

for (i = 0; i < 100; i++) {
 html += '<li>This is list item ' + i + '</li>';
}

$listOne[0].innerHTML = '';
$listOne.append(html);
ready
replace-with
var html = '';

for (i = 0; i < 100; i++) {
 html += '<li>This is list item ' + i + '</li>';
}

$listOne.replaceWith(html);
ready

Revisions

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