jquery html vs empty vs innerHTML (v18)

Revision 18 of this benchmark created by Heavensrevenge on

Description

.firstChild is always faster than .lastChild

Preparation HTML

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

<ul id="my_list"></ul>

<script>
  $(function() {
    var i = 0, len = 20;
    while (i++ < len) {
      $('#my_list').append( $('<li>').html('list item ' + i) );
    }
  });
</script>

Setup

var $ul = $('#my_list'),
        el = document.getElementById('my_list'),
        $clone = $ul.children().clone(),
        child;

Teardown


    $ul.html($clone);

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML 1
el.innerHTML = '';
ready
innerHTML 2
el.innerHTML = null;
ready
jquery html
$ul.html('');
ready
jquery empty
$ul.empty();
ready
jquery remove 1
$ul.children().remove()
ready
jquery remove 2
$ul.find('li').remove()
ready
custom 1
while (child = el.firstChild) {
  el.removeChild(child);
}
ready
custom 2
while (el.firstChild) {
  el.removeChild(el.firstChild);
}
ready
custom 3
while (el.childElementCount) {
  el.removeChild(el.firstChild);
}
ready
custom 4
while (el.childNodes.length) {
  el.removeChild(el.firstChild);
}
ready
custom 5
while (el.childElementCount) {
  el.removeChild(el.childNodes[0]);
}
ready
custom 6
for (var i = 0, len = el.childElementCount; i < len; i++) {
  el.removeChild(el.firstChild);
}
ready

Revisions

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