jquery - empty vs html (v23)

Revision 23 of this benchmark created on

Description

Empties table body, and fills it again

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<table>
<tbody id="foo">
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</tbody>
</table>
<script>
  var foo = $('#foo');
  var cachedContent = foo.html();
  foo.empty(); //starts empty. content is appended before test

//Fast empty from http://jsperf.com/removechildren/8
function fastEmpty(container){
  var len = container.childNodes.length;
  while (len--) {
    container.removeChild(container.lastChild);
  };
}
</script>

Setup

foo.append(cachedContent);

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
foo[0].innerHTML = '';
ready
html
foo.html('');
ready
empty
foo.empty();
ready
removeChild
fastEmpty(foo[0]);
ready
replace
$("#foo").replaceWith('');
ready
jQuery sel w/empty
$("#foo").empty();
ready
detach
foo.children().detach().remove();
ready

Revisions

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