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
docu         


        

Answer 1

According to the OP questions, its comments, and the one good answer, in this instance you are better off using elem.outerHTML because you are/can pre-parse your input in Rails.

If you were to move decision making to the JavaScript side, good coding practice would dictate creating all nodes by hand. If you are processing 100's of element inserts then you will notice a difference in speed (if you were to benchtest both solutions).

Answer 2

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 3

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.