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:
// This is a div.
container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // logs "DIV"
d.outerHTML = "This paragraph replaced the original div.
";
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!
