InnerHTML vs DOM Manipulation 2

Benchmark created by Nick Thompson on November 8, 2012

Preparation HTML

<div>
  <div id="main"></div>
</div>
<script src="//raw.github.com/olado/doT/master/doT.min.js"></script>

Setup

var s = [
      "<table class=\"editor\">",
        "{{ var i = 15; while (i--) { }}",
          "<tr>",
            "{{ var j = 23; while (j--) { }}",
              "<td>{{= it.data }}</td>",
            "{{ } }}",
          "</tr>",
        "{{ } }}",
      "</table>"
    ].join("");
    
    var template = doT.template(s);
    var container = document.getElementById("main");

Teardown

    while (container.hasChildNodes()) {
      container.removeChild(container.lastChild);
    }
  

Test runner

container.innerHTML = template({data: "...."});

var table = document.createElement("table");
table.className = "editor";
var i = 15;
var j = 23;
while (i--) {
  var row = document.createElement("tr");
  while (j--) {
    var cell = document.createElement("td");
    cell.innerText = "....";
    row.appendChild(cell);
  }
  table.appendChild(row);
  j = 23;
}
container.appendChild(table);

Revisions

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

• Revision 1: published by Nick Thompson on November 8, 2012
• Revision 2: published on December 31, 2013