jQuery DOM Manipulation (v3)

Revision 3 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

Revisions

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