innerhtml vs innertext
innertext vs outertext
html element to string
get innerhtml of div
innerhtml vs innertext vs textcontent
// 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.
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?
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.
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.
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.
- 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
- 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?
outerHTMLtargets self, so it it also destroy/replaces the container (self) in the process when being replaced.
innerHTMLreplaces all the children, and does not destroy the container (self). If you have an event handler added to an element which you use
innerHTMLon, 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.