title: Is creating elements in javascript at runtime slower than classical HTML elements?
body: <p>I am trying to figure out if creating elements to render to the DOM is slower than using simple HTML tags, such as <code>&lt;h2&gt;</code> for example.</p>
  
  <p>I set out with this question and didn't find an answer here that I felt satisfied my curiosity. As a result, I decided to just make a simple test to run. This is not much of a question I realize as I am going to provide my findings but perhaps there are edge cases or others have some good tips.</p>
  
  <p>I used some help from the mvc3 razor engine to generate large amounts of classic HTML elements.</p>
  
  <p>Javascript Method:</p>
  
  <pre><code>&lt;div id="appendHere"&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      var appenders = [];
      for(var i = 0; i &lt; 10000; i++){
       var appenderIzer = document.createElement("h2");
       appenderIzer.innerHTML = "TestJs";
       document.getElementById("appendHere").appendChild(appenderIzer);
       appenders.push(appenderIzer);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So here I am just going to be creating the element with javascript and then appending it to div element. I chose to store the elements in an array to see if that may also affect the loading performance.</p>
  
  <p>Classical HTML (note the help of razor...writing out that many h2's could be tedious)</p>
  
  <pre><code>@for (int i = 0; i &lt; 10000; i++)
  {
   &lt;h2&gt;TestClassic&lt;/h2&gt;
  }
  </code></pre>
  
  <p>In the end there was really no difference, perhaps nanoseconds. There may be factors which would highlight this difference but in the other variations I could not find them.</p>
  
  <p>Are these findings accurate? <strong>Is</strong> there a difference in the time it takes to render a page from pure HTML tags versus from javascript-created javascript-appended elements?</p>