jQuery append vs html vs innerHTML vs createElement list performance (v220)

Revision 220 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="list" style="display:none;">
</div>

Setup

var len = 200,
    $list = $('#list'),
    list = $list[0];

Test runner

Ready to run.

Testing in
TestOps/sec
jquery .append(jquery)
var i;
for (i = 0; i < len; i++) {
  $list.append($('<div/>', {
    text: 'Test ' + i
  }));
}
ready
jQuery .html()
var html = '',
  i;
for (i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

$list.html(html);
ready
javascript innerHTML
var html = '',
  i;

for (i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

list.innerHTML = html;
ready
createElement appendChild
var i, div;
var listwrapper = document.createElement("div");

for (i = 0; i < len; i++) {
  div = document.createElement("div");
  div.textContent = "Test " + i;
  listwrapper.appendChild(div);
}

list.appendChild(listwrapper);
ready
createElement insertBefore
var i, div;
var listwrapper = document.createElement("div");
var first = document.createElement("div");

first.textContent = "Test " + (len-1);
listwrapper.appendChild(first);

for (i = len-2; i >= 0; i--) {
  div = document.createElement("div");
  div.textContent = "Test " + i;
  listwrapper.insertBefore(div,first);
}

list.appendChild(listwrapper);
ready
jquery .append(string)
var i;
var html = '';
for (i = 0; i < len; i++) {
 html += '<div>' + 'Test ' + i + '</div>';
}
$list.append(html);
ready
insertAdjacentHTML (beforeend)
var html = '',
  i;

for (i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

list.insertAdjacentHTML('beforeend', html);
ready
javascript array innerHTML
var html = [],
  i;

for (i = 0; i < len; i++) {
  html.push('<div>Test ');
  html.push(i);
  html.push('</div>');
}

list.innerHTML = html.join('');
ready
javascript innerHTML direct
var html = '',
  i;

for (i = 0; i < len; i++) {
  list.innerHTML += '<div>Test ' + i + '</div>';
}
ready

Revisions

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