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!
- If element has no parent element, set outerHTML will throw DOMException.
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.
-
Get: different node types gets different result
- 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
- set
- Browser compatibility!
- get
it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;
- get
textContent v.s. innerHTML
- It's recommand to use textContent!
- innerHTML parse text as HTML (except "script" element) -> poor performance!
- innerHTML has security problem!