innerHTML/outerHTML; innerText/outerText; textContent_html/css_WEB-ITnose

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!