28

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?

Improve this question
6
  • 1
    Well, you did mention it, innerHTML can be set while the element is not attached to the DOM, large manipulations would tend to go faster, if they don't update the DOM during the manipulations Commented Oct 25, 2017 at 20:59
  • 2
    setting outerHTML is needlessly terrible. just use elem.className="comment" Commented Oct 25, 2017 at 21:01
  • 2
    It is personal opinion and most personal opinions are going to say setting outerHTML is horrible Commented Oct 25, 2017 at 21:03
  • Using inner html shouldn't really be used either instead create Commented Oct 25, 2017 at 21:05
  • A text node and insert it into the article element Commented Oct 25, 2017 at 21:06

3 Answers 3

Reset to default
22

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

"This replaces only the content (if using i.e. "=") inside the current element reffered (sic) to." - this isn't correct - it destroys and recreates the element entirely - hence it destroying any event handlers, etc, that may have been registered on it.
no your statement "This replaces only the content (if using i.e. "=") inside the current element reffered (sic) to." - the only bit not copied - is factually incorrect - it doesn't only replace the content. It destroys the container too. I shall vote as I see fit - please feel free to "report" anything you feel.
@Fraser no, it does not? outerHTML targets self, so it it also destroy/replaces the container (self) in the process when being replaced. innerHTML replaces all the children, and does not destroy the container (self). If you have an event handler added to an element which you use innerHTML on, the event handler will not be destroyed. It will continue to work, since the element is still there.
Modifying innerHTML causes the content to be re-parsed and DOM nodes to be recreated, losing any handlers you have attached.
@Fraser yes! But you were not talking about the content! You were referring to the container. When an element is replaced/destroyed it does include being re-parsed and DOM nodes of course! I have not stated anything else.
5

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.

Improve this answer

7 Comments

Thanks @Fraser, I'm now using textContent.
Thank you, this answer makes much more sense within the context of the question.
@Fraser - would altering the innerHtml of an element with id=1 still retain handlers associated with that element, but outerHTML completely destroys those handlers?
@Fraser - thx for your response. My understanding was that replacing innerHTML on an element will retain any event handlers associated with a particular element while just changing its contents only. But you seem to be saying that it is incorrect?
@BKSpurgeon - yes It destroys the element and therefore any handlers or other data that may have been set on a property of the element. The only exception are attributes which are retained. See: stackoverflow.com/questions/5113105/…
|
0

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).

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.