title: Difference between creating DOM elements: createElement, add properties, etc VS creating String of them and then appending
body: <p>I was wondering <strong>difference between these two techniques used for creating HTML elements</strong>. I can't find any difference. I just want to know if there exists a difference or more on any basis (performance or whatever).</p>
  
  <p>The 1st technique using JS inbuilt methods -</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var el1 = document.createElement('div');
  el1.innerHTML = 'Element Div 1';
  var el2 = document.createElement('span');
  el2.innerHTML = ' - Span Element';
  el2.classList.add('red');
  document.body.appendChild(el1);
  el1.appendChild(el2);
  el1.id = "div";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red {
      color: red;
      font-size: 13px;
  }
  #div {
      font-size: 18px;
      color: burlywood;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now the 2nd technique <em>just in one step</em> -</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.body.innerHTML = '&lt;div id="div"&gt;Element Div 1&lt;span class="red"&gt; - Span Element&lt;/span&gt;&lt;/div&gt;';</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red {
    color: red;
    font-size: 13px;
  }
  #div {
    font-size: 18px;
    color: burlywood;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Both of these two techniques produce the same result and I can easily manipulate each HTML element created in any of the two ways <em>(and in the same way)</em>.</p>
  
  <p><strong><a href="http://jsfiddle.net/rpwtupf1/2/" rel="nofollow">Fiddle1</a> using 1st technique<br /></strong>
  <strong><a href="http://jsfiddle.net/mw4hu678/1/" rel="nofollow">Fiddle2</a> using 2nd technique</strong></p>
  
  <p>See the above two fiddles, I've used the same code for manipulating the elements. As you'll see both produces the same output. Then what makes them different. 1st one took several lines while the 2nd one just 1 line. <strong>Any performance difference between them??</strong> Or any other difference they have which I'm not noticing.</p>
  
  <p><em>Correct me if I was wrong anywhere.</em></p>
  
  <p>AND I know the 1st one preserves references to various objects which can be helpful later in the code but I'm not much after that. My main question is - difference between creating elements one by one, adding properties, etc. and the 2nd one which just do it in single step by using String.</p>
  
  <p>Thanks.</p>