title: JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?
body: <p>I'm looking at a problem that needs a complex block of divs to be created once for each element in a set of ~100 elements.</p>
  
  <p>Each individual element is identical except for the content, and they look (in HTML) something like this:</p>
  
  <pre><code>&lt;div class="class0 class1 class3"&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;content&lt;/div&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;div id="content2"&gt;content2&lt;/div&gt;
  &lt;div class="class4"&gt;content3&lt;/div&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;content3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I could either:</p>
  
  <p>1) Create all the elements as <code>innerHTML</code> with string concatenation to add the content.</p>
  
  <p>2) Use <code>createElement</code>, <code>setAttribute</code> and <code>appendChild</code> to create and add each div.</p>
  
  <p>Option 1 gets a slightly smaller file to download, but option 2 seems to be slightly faster to render.</p>
  
  <p>Other than performance is there a good reason to go via one route or the other? Any cross-browser problems / performance gremlins I should test for?</p>
  
  <p>...or should I try the template and clone approach?</p>
  
  <p>Many thanks.</p>