dom append or dom-fragment append (v2)

Revision 2 of this benchmark created by Maher Salam on March 1, 2011

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var list_count = 0,
      the_list = [];
  
  for (var i = 0; i < 75; i++) {
   the_list[i] = Math.random();
  }
  
  
  function makeUL_1(list) {
   $("<ul></ul>").attr({
    "id": "my_list" + list_count
   }).appendTo("body");
  
   for (var i = 0; i < list.length; i++) {
    $("<li></li>").text(list[i]).appendTo("#my_list" + list_count);
   }
   $("#my_list" + list_count).hide();
   list_count++;
  }
  
  function makeUL_2(list) {
   var $ul = $("<ul></ul>").attr({
    "id": "my_list" + list_count
   });
  
   for (var i = 0; i < list.length; i++) {
    $("<li></li>").text(list[i]).appendTo($ul);
   }
   $ul.appendTo("body");
   $ul.hide();
   list_count++;
  }
  
  function makeUL_3(list) {
   var $ul = $("<ul></ul>").attr({
    "id": "my_list" + list_count
   }),
       html = [];
  
   for (var i = 0, length = list.length; i < length; i++) {
    html.push('<li>' + list[i] + '</li>');
   }
  
   $ul.html(html.join('\n')).appendTo("body");
   $ul.hide();
   list_count++;
  }
</script>

Test runner

makeUL_1(the_list);

makeUL_2(the_list);

makeUL_3(the_list);

Revisions

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

• Revision 1: published by Kyle Simpson on February 16, 2011
• Revision 2: published by Maher Salam on March 1, 2011