jQuery append vs html vs innerHTML list performance II (v114)

Revision 114 of this benchmark created by Kanitta on

Description

jQuery append vs html vs innerHTML list performance II

Preparation HTML

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

<h1>List 1</h1>
<div style="display:inline;">
<div id="list1" style=""></div>
</div>

<div style="display:inline;">
<h1>List 2</h1>
<div id="list2"></div>
</div>

<h1>List 3<div style="display:inline;"></h1>
<div id="list3"></div>
</div>

Setup

var len = 10;

Test runner

Ready to run.

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

$('#list2').html(html);
ready
javascript innerHTML
var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

document.getElementById('list3').innerHTML = html;
ready

Revisions

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