DOM: nodeValue vs. textConent vs. innerText vs. innerHTML

<div id='blog test'>
   This element is <strong>strong</strong> and     has some super fun <code>code</code>!
</div>

const getValue = document.getElementById('blog-test');

getValue.textContent
// =>   This element is strong and     has some super fun code!

getValue.innerText
// =>   This element is strong and has some super fun code!

getValue.innerHTML
// =>   This element is <strong>strong</strong> and     has some super fun <code>code</code>!

 

	nodeValue	textContent	innerText	innerHTML
return	A string. Representing the value of the node.	A string. The text content of all elements in the node.	The rendered text content of a node.	The string inside our  <div> and HTML (or XML) markup contained within our string.
		: Including script and style elements.  : But without inner element tags.	without spacing and inner element tags.	: Including any spacing, line break, formatting irregulars, and inner element tags.​
		: not style aware. : Aware of formatting (like spacing and line breaks and will return those).	Aware of the rendered appearance of text(styling and CSS).
When to use		To see what’s in the element, plus any styling on it.	To see what’s in the element with zero formattings.	To see the HTML markup and what exactly is in our element.
sets or returns	The node value of the specified node	The text content of all elements(include all child nodes).	The content of the node as plain text. Only “human-readable” elements.	The content of an element in HTML format.
Note	If you want to return the text of an element, remember that text is always inside a Text node, and you will have to return the Text node's node value (element.childNodes[0].nodeValue).	using textContent can prevent XSS attacks	Since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.).	The text characters include &, <, or >  : return these as HTML entities '&amp;', '&lt;', and '&gt;'.
	For other node types, the nodeValue property will return different values for different node types.		Altering innerText in Internet Explorer (version 11 and below) removes child nodes from the element and permanently destroys all descendant text nodes. It is impossible to insert the nodes again into any other element or into the same element after doing so.
	particular useful when working with XML, such as SVG.	Shows entire text include invisible text	Shows the visible text only

 

 

---

https://medium.com/better-programming/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc

http://xahlee.info/js/js_textContent_innerHTML_innerText_nodeValue.html