Info

From http://elv1s.ru/files/html+css/removeChildren.html

Test various ways of emptying an element of child nodes

Preparation code

<div id="container" style="display:none">
</div>
<script>
  Benchmark.prototype.setup = function() {
    var container = document.getElementById('container'),
        proto = addelements(document.createDocumentFragment());
    
    function addelements(proto) {
      var i = 200,
          p, j, span;
      while (i--) {
        p = document.createElement('p');
        j = 5;
        while (j--) {
          span = document.createElement('span');
          span.appendChild(document.createTextNode(i * j + 'yada-yada'));
          p.appendChild(span);
        };
        proto.appendChild(p);
      };
      return proto;
    };
    
    function prepare() {
      container.appendChild(proto.cloneNode(false));
    };
  };

  Benchmark.prototype.teardown = function() {
    if (container.childNodes.length) {
        throw "Container was not emptied!";
    }
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

prepare();

container.innerHTML = '';

prepare();

container.textContent = '';

prepare();

var child;
while (child = container.firstChild) {
  container.removeChild(child);
};

prepare();

var child;
while (child = container.lastChild) {
  container.removeChild(child);
};

prepare();

var len = container.childNodes.length;
while (len--) {
  container.removeChild(container.lastChild);
};

prepare();

Array.prototype.forEach.call(container.childNodes, function(e) {
  this.removeChild(e);
}, container);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Nikita Vasilyev on 8th August 2010 and last updated on 10th August 2010
• Revision 2: published by Thomas Aylott on 8th August 2010 and last updated on 4th September 2010
• Revision 3: published by Mathias Bynens on 9th August 2010
• Revision 7: published on 8th September 2011
• Revision 8: published by Francis Avila on 27th December 2012

0 comments