Javascript TextNode + AppendChild vs InnerHTML

Benchmark created by Jon Quach on

Preparation HTML

<div id="main"></div>

Setup

var element = document.getElementById('main');
    var insert = '<div>A bunch of stuff</div>';
    var node = document.createTextNode(insert);

Teardown


    element.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
InnerHTML
element.innerHTML = insert;
ready
TextNode + AppendChild
element.appendChild(node);
ready

Revisions

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

  • Revision 1: published by Jon Quach on
  • Revision 2: published on
  • Revision 3: published by ThoAppelsin on