jquery html vs empty vs innerHTML (v3)

Revision 3 of this benchmark created by mark on

Preparation HTML

<ul id="my_list"></ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(function() {
   var i = 0,
       $ul = $('#my_list'),
       $li = $('<li />').html('list item');
  
   while (i < 100) {
    $ul.append($li.clone());
    i++;
   }
  });
  
  // slightly faster function.
  function empty(element) {
   var i = element.childNodes.length;
   while(i--){
     element.removeChild(element.lastChild);
    }
   }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
document.getElementById('my_list').innerHTML = '';
ready
jquery html
$('#my_list').html('');
ready
jquery empty
$('#my_list').empty();
ready
custom empty function
empty(document.getElementById('my_list'))
ready

Revisions

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