javascript remove all child nodes javascript / jquery (v300)

Revision 300 of this benchmark created by npjohns on

Preparation HTML

<div id="box"></div>

<script>
var boxAnchor = document.createElement('div');
boxAnchor.style.cssText="white-space:nowrap";
boxAnchor.id = 'box';
for(var i=0;i<1000;i++)
{
var b = document.createElement('B');
boxAnchor.appendChild(b.insertBefore(document.createTextNode('asdf fewf'), b.firstChild).parentNode);
}
var box=document.getElementById('box');
function refreshRange()
{
box.parentNode.replaceChild(boxAnchor.cloneNode(true),box);
box=document.getElementById('box');
}
var range = document.createRange();
refreshRange();
</script>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var jq111 = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
var jq213 = jQuery.noConflict(true);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
removeChild Recheck
refreshRange();
while (box.firstChild) 
  box.removeChild(box.firstChild);
ready
removeChild lastChild with reference
refreshRange();
    var last;
    while ((last = box.lastChild)) box.removeChild(last);
ready
firstChild haschildnodes() check
refreshRange();
while(box.hasChildNodes())
  box.removeChild(box.firstChild);
ready
deletecontents (IE9+)
refreshRange();
range.selectNodeContents(box);
range.deleteContents();
ready
replaceChild cloneNode(shallow) (DESTRUCTIVE)
refreshRange();
var newBox = box.cloneNode(false);
box.parentNode.replaceChild(newBox,box);
box=newBox;
ready
removeChild then reAttach
refreshRange();
var parent = box.parentNode;
var next = box.nextSibling;
parent.removeChild(box);
while(box.hasChildNodes())
  box.removeChild(box.firstChild);
parent.insertBefore(box,next);
ready
innerhtml = ""
refreshRange();
box.innerHTML = '';
ready
jquery 111
refreshRange();
jq111(box).contents().remove();
ready
hide
refreshRange();
var display = box.style.display;
box.style.display = 'none';
while(box.hasChildNodes())
  box.removeChild(box.firstChild);
box.style.display = display;
ready
jquery 213
refreshRange();
jq213(box).contents().remove();
ready

Revisions

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