innerHTML VS. createElement (v6)

Revision 6 of this benchmark created by dan on

Description

A performance comparison of innerHTML VS document.createElement

Preparation HTML

<script>
  var container = document.createElement("div");
  container.style = 'height: 1px; position: absolute';
  container.id = 'someContainer';
  document.body.appendChild(container);
  
  container = document.getElementById('someContainer');
  
  function removeIt() {
    var child = document.getElementById('someElm');
    container.removeChild(child);
  }
  
  function writeTest() {
    var newHTML = '<div id="someElm" style="height: 1px; position: absolute"></div>';
    container.innerHTML = newHTML;
  
  }
  
  function elemTest() {
    var newDiv = document.createElement("div");
    newDiv.style.height = '1px';
    newDiv.id = 'someElm';
    container.appendChild(newDiv);
  
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
document.write
writeTest();
ready
document.createElement
elemTest();
ready

Revisions

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