jquery HTML element creation techniques (v19)

Revision 19 of this benchmark created on

Description

"Attempts to dilucidate which option is more suitable for fast DOM manipulation: jQuery string creation, jQuery DOM manipulation methods or Javascript's documentFragment use."

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />

<ul id="test-list"></ul>

<script>
  var $list = $('#test-list');
  var list = $list[0];
</script>

Setup

var $list = $('#test-list');
    var list = $list;

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery obj + jQuery .append()
$list.empty();

for (var i = 0; i < 10000; i++) {
  var $li = $('<li>');
  $li.html(i);
  $list.append($li);
}
ready
createElement + appendChild
$list.empty();

for (var i = 0; i < 10000; i++) {
  var li = document.createElement('li');
  li.innerHTML = i;
  list.appendChild(li);
}
ready
jQuery .html() + string concat
$list.empty();

var str = '';

for (var i = 0; i < 10000; i++) {
  str += '<li>' + i + '</li>';
}

$list.html(str);
ready
innerHTML + string concat
$list.empty();

var str = '';

for (var i = 0; i < 10000; i++) {
  str += '<li>' + i + '</li>';
}

list.innerHTML = str;
ready
innerHTML + arr
$list.empty();

var arr = [];

for (var i = 0; i < 10000; i++) {
  arr.push('<li>' + i + '</li>');
}

$list.html(arr.join(''));
ready
innerHTML + arr
$list.empty();

var arr = [];

for (var i = 0; i < 10000; i++) {
  arr.push('<li>' + i + '</li>');
}

list.innerHTML = arr.join('');
ready
documentFragment + createElement + appendChild + jQuery .html()
$list.empty();

var container = document.createDocumentFragment();

for (var i = 0; i < 10000; i++) {
  var li = document.createElement('li');
  li.innerHTML = i;
  container.appendChild(li);
}

$list.html(container);
ready
documentFragment + createElement + appendChild
$list.empty();

var container = document.createDocumentFragment();

for (var i = 0; i < 10000; i++) {
  var li = document.createElement('li');
  li.innerHTML = i;
  container.appendChild(li);
}

list.appendChild(container);
ready

Revisions

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