title: Javascript innerHTML vs outerHTML
body: <p>I have the following javascript:</p>
  
  <pre><code>// create a new article tag
  var elem = document.createElement('article');
  
  // append the article to the comments list
  document.querySelector('#comments-list').appendChild(elem);
  </code></pre>
  
  <p>I want to set the content of the article, and add some classes to it too so I'm looking at two ways of doing this:</p>
  
  <pre><code>// Option 1
  // set the content using .innerHTML()
  // and add the classes manually to the classList 
  elem.innerHTML = "This is the comment";
  elem.classList.add('comment'); 
  
  // Option 2
  // set the content and classes in one go using .outerHTML()
  elem.outerHTML = "&lt;article class='comment'&gt;This is the comment&lt;/article&gt;";
  </code></pre>
  
  <p>Both work great, but I notice that <code>.innerHTML</code> needs to be called before the element is appended to the DOM, wheras <code>outerHTML</code> needs to be called after it added to the DOM.</p>
  
  <p>I prefer the second option because I'm actually rendering Rails partials in this javascript file, and there's a nuanced case where it is preferable.</p>
  
  <p>My question is whether one of these techniques is better than the other? Is is a problem to add an element to the DOM and then change it's HTML afterwards? Or is it better from a perfomance standpoint to set innerHTML before writing to the DOM?</p>