Javascript innerHTML vs outerHTML

outerhtml javascript
innerhtml vs innertext
outerhtml jquery
innertext vs outertext
html element to string
get innerhtml of div
css innerhtml
innerhtml vs innertext vs textcontent

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?

Javascript innerHTML vs outerHTML, Hey thanks for A2A. Their is a slight difference between both: innerHTML = HTML inside the selected element. outerHTML = HTML inside the selected Element +  InnerHTML vs outerHTML properties innerHTML and outerHTML are properties of element object in javascript. These two things are used to replace the content and selected tag. innerHTML is set or get content of the selected tag. outerHTML is set or get content with selected tag.

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.

What is the difference between innerHTML and outerHTML?, innerHTML vs outerHTML. Hyper Text The innerHTML & outerHTML both are the belongings element object of JavaScript's. Both of these  outerHTML is similar to innerHTML, it is an element property that includes the opening an closing tags as well as the content. It hasn't been as widely copied as innerHTML so it remains more-or-less IE only.

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

What is The Difference Between innerHTML and outerHTML, innerHTML : innerHTML represents the HTML inside the element, i.e. between the opening and closing tags. innerHTML is used to set or get  The outerHTML property sets or returns the HTML element and all it's content, including the start tag, it's attributes, and the end tag. Browser Support. Return the outerHTML property: Element .outerHTML. Set the outerHTML property: Element .outerHTML = text. Property Values. Specifies the new HTML contentt. Technical Details.

Element.outerHTML, Take the following code as an example: <p id="myid">Here is some <b>​interesting</b> text</p> <script language="JavaScript"><!-- Get and Replace HTML content with outerHTML. outerHTML is a JavaScript property that can be used to get the string with a HTML element, including its tag, attributes and child elements, also it can replace a HTML tag (including its content) with other HTML content. 1. Syntax, get HTML content with outerHTML:

difference between innerHTML and outerHTML in javascript , Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string. To only obtain the HTML representation of the contents of an element, or to replace the contents

innerHTML vs outerHTML Solutions, Outer HTML term in JavaScript describes html source code that is inside some innerHTML = HTML inside of the selected element; outerHTML = HTML inside of the JavaScript - inner vs outer html · JavaScript - innerHTML vs outerHTML  The .innerHTML property refers to the literal HTML markup that is, once assigned, interpreted and incorporated into the DOM (Document Object Model) for the current document. On the other hand, the .value property simply refers to the content of typically an HTML input control, such as a textbox.

Comments
  • 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
  • setting outerHTML is needlessly terrible. just use elem.className="comment"
  • It is personal opinion and most personal opinions are going to say setting outerHTML is horrible
  • Using inner html shouldn't really be used either instead create
  • A text node and insert it into the article element
  • "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.
  • Thanks @Fraser, I'm now using textContent.