innerHTML v.s. outerHTML
Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML Functionality Get serialized HTML code describing its descendants. Set : Remove all the children, parse the content string and assign the resulting nodes as the children of the element. Element.outerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML Functionality Get serialized HTML fragment describling the element and its descendants. Set : Replace the element with the nodes generated by parsing the content string with parent of the element as the context node for the fragment parsing algorithm. NOTE If element has no parent element, set outerHTML will throw DOMException. e.g. [Chrome Dev Console] document.documentElement.outerHTML='a'; Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': This element's parent is of type '#document', which is not an element node. Considering below code.
// HTML:// <div id="container"><div id="d">This is a div.</div></div>container = document.getElementById("container");d = document.getElementById("d");console.log(container.firstChild.nodeName); // logs "DIV"d.outerHTML = "<p>This paragraph replaced the original div.</p>";console.log(container.firstChild.nodeName); // logs "P"// The #d div is no longer part of the document tree,// the new paragraph replaced it.
While the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element!
innerText and outerText
Node.innerText Non-standard: DO NOT use it on production site. HTMLElement.outerText Non-standard: DO NOT use it on production site. Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
| Basic support | 4 | 45 (45) | 6 | 9.6 (probably earlier) | 3 |
textContent v.s innerText
Node.textContent
Get: different node types gets different result null: document, notation (use document.documentElement.textContent instead). text inside the node: CDATA, comment, text node, processing instruction. (nodeValue)
concatenation of children nodes (excluding comment, processing instruction nodes) text: other types node
Set: Remove node children and replace it with a text node. Difference from innerText many... : refer to MDN. Why we still need innerText sometime? Browser compatibility! IE has better support for innerText than for textContent. Only IE9+ supports textContent, but IE6+ supports innerText. Common usage:
set
t[t.innerText ? 'innerText' : 'textContent'] = v.n
get
it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;
textContent v.s. innerHTML
It's recommand to use textContent! innerHTML parse text as HTML (except "script" element) -> poor performance! innerHTML has security problem! 
