W3C DOM vs. innerHTML

Benchmark created by check_ca on July 1, 2011

Preparation HTML

<div id="writeroot" style="display:none"></div>
<script>
  function removeTable()
  {
      document.getElementById('writeroot').innerHTML = '';
  }
  
  var content = "ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ"
  
  /* W3CDOM 1: Create all elements as needed */
  
  function w3cdom1()
  {
      removeTable();
      var x = document.createElement('div');
      var y = x.appendChild(document.createElement('div'));
      for (var i=0;i<50;i++)
      {
          var z = y.appendChild(document.createElement('div'));
          for (var j=0;j<50;j++)
          {
              var a = z.appendChild(document.createElement('div'));
              a.appendChild(document.createTextNode(content));
          }
      }
      document.getElementById('writeroot').appendChild(x);
  }
  
  /* W3CDOM 2: Create elements once, then clone */
  
  function w3cdom2()
  {
      removeTable();
      var x = document.createElement('div');
      var y = x.appendChild(document.createElement('div'));
      var tr = document.createElement('div');
      var td = document.createElement('div');
      var ast = document.createTextNode(content);
      for (var i=0;i<50;i++)
      {
          var z = y.appendChild(tr.cloneNode(true));
          for (var j=0;j<50;j++)
          {
              var a = z.appendChild(td.cloneNode(true));
              a.appendChild(ast.cloneNode(true));
          }
      }
      document.getElementById('writeroot').appendChild(x);
  }
  
  /* INNERHTML 1: concatenate one string */
  
  function inner1()
  {
      removeTable();
      var string = '<div><div>';
      for (var i=0;i<50;i++)
      {
          string += '<div>';
          for (var j=0;j<50;j++)
          {
              string += '<div>' + content +'</div>';
          }
          string += '</div>';
      }
      string += '</div></div>';
      document.getElementById('writeroot').innerHTML = string;
  }
  
  /* INNERHTML 2: push and join */
  
  function inner2()
  {
      removeTable();
      var string = new Array();
      string.push('<div><div>');
      for (var i=0;i<50;i++)
      {
          string.push('<div>');
          for (var j=0;j<50;j++)
          {
              string.push('<div>' + content + '</div>');
          }
          string.push('</div>');
      }
      string.push('</div></div>');
      var writestring = string.join('');
      document.getElementById('writeroot').innerHTML = writestring;
  }
</script>

Test runner

w3cdom1()

w3cdom2()

inner1()

inner2()

Revisions

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

• Revision 1: published by check_ca on July 1, 2011