Javascript innerHTML vs outerHTML

Question

I have the following javascript:

// create a new article tag var elem = document.createElement('article');  // append the article to the comments list document.querySelector('#comments-list').appendChild(elem); 

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:

// 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 = "<article class='comment'>This is the comment</article>"; 

Both work great, but I notice that .innerHTML needs to be called before the element is appended to the DOM, wheras outerHTML needs to be called after it added to the DOM.

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.

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?

Answer 1

Taken from the MDN-site :

innerHTML

• The Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.

Note: If a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use Node.textContent to get a correct copy of these text nodes' contents.

outerHTML

The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.

innerHTML vs. outerHTML :

Use innerHTML as default. This replaces only the content (if using i.e. "=") inside the current element referred to. If you are using outerHTML, then the element referred to will also be replaced.

Demo:

var h20 = document.getElementById("h20"),      h21 = document.getElementById("h21");  var ran = false;    console.log("'h20' innerHTML (1) =", "'" + h20.innerHTML + "'", "outerHTML (1) =", "'" + h20.outerHTML + "'");  console.log("'h21' innerHTML (1) =", "'" + h21.innerHTML + "'", "outerHTML (1) =", "'" + h21.outerHTML + "'");    document.getElementById("button").onclick = evt => {      if (ran) return false;            h20.innerHTML = "<div>innerHTML</div>";      h21.outerHTML = "<div>outerHTML</div>";            console.log("'h20' innerHTML (2) =", "'" + h20.innerHTML + "'", "outerHTML (2) =", "'" + h20.outerHTML + "'");      console.log("'h21' innerHTML (2) =", "'" + h21.innerHTML + "'", "outerHTML (2) =", "'" + h21.outerHTML + "'");            ran = true  }

<button id="button">innerHTML vs. outerHTML</button>  <br>  <h2 id="h20"></h2>  <h2 id="h21"></h2>

Answer 2

I'd say both are probably not what you want, use textContent or else whatever property handles the text for the element.

elem.textContent = "This is the comment"; elem.classList.add("comment");  

innerHTML parses content as HTML and completely destroys the element and recreates it, it also destroys any event handlers, etc that might be registered for the element. With outerHTML the element set will still hold a reference to the original element (if any).

So both have possible unintended side-effects vs the correct property to set text content.