createElement + appendChild vs innerHTML vs createDocumentFragment + createElement + appendChild vs createContextualFragment + appendChild vs DOMParser + adoptNode + appendChild vs insertAdjacentHTML(BeforeEnd) (v2)

Revision 2 of this benchmark created on

Preparation HTML

<div id="test">
</div>
<script>
  var doc, test;

  doc = document;
  test = doc.getElementById('test');

  if (!test) {
    test = doc.body.appendChild(doc.createElement('div'));
    test.id = 'test';
  }
</script>

Teardown


    test.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
createElement + appendChild
test.appendChild(doc.createElement('div'));
ready
innerHTML
test.innerHTML += '<div></div>';
ready
createDocumentFragment + createElement + appendChild
test.appendChild(
doc.createDocumentFragment().appendChild(
doc.createElement('div')));
ready
createContextualFragment + appendChild
var range;

range = doc.createRange();

range.selectNodeContents(doc.body);
test.appendChild(range.createContextualFragment('<div></div>'));
range.detach();
ready
DOMParser + adoptNode + appendChild
test.appendChild(
doc.adoptNode((new DOMParser()).parseFromString('<div></div>', 'text/xml').documentElement));
ready
insertAdjacentHTML(BeforeEnd)
test.insertAdjacentHTML('BeforeEnd', '<div></div>');
ready

Revisions

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