jquery.html vs innerHTML (v3)

Revision 3 of this benchmark created on

Preparation HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>

<div id="list" style="display:none"></div>

Teardown


    $('#list').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.html()
var html = [];
for (var i = 0; i < 500; ++i) {
  html.push('<div>Test ' + i + '</div>');
}

$('#list').html(html.join(''));
ready
innerHTML
var html = [];
for (var i = 0; i < 500; ++i) {
  html.push('<div>Test ' + i + '</div>');
}

document.querySelector('#list').innerHTML = html.join('');
ready
jQuery.empty().append()
var html = [];
for (var i = 0; i < 500; ++i) {
  html.push('<div>Test ' + i + '</div>');
}

$('#list').empty().append(html.join(''));
ready
jQuery.replaceWith()
var html = [];
for (var i = 0; i < 500; ++i) {
  html.push('<div>Test ' + i + '</div>');
}

$('#list').replaceWith('<div id="list" style="display:none">' + html.join('') + '</div>');
ready
innerHTML while
var html = [];
var i = 500;
while (i--) {
  html.push('<div>Test ' + i + '</div>');
}
html.reverse();
document.querySelector('#list').innerHTML = html.join('');
ready

Revisions

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