HTML Element .innerText Since: HTML5(IE origin → standardized)

// Get the visible text.
var text = element.innerText;

// Set the text.
element.innerText = "New text";

<div id="box">
	<p>Visible text</p>
	<p style="display: none;">Hidden text</p>
	<span>Another text</span>
</div>

var box = document.querySelector("#box");

// innerText only retrieves text that is currently visible on screen.
console.log(box.innerText);
// Returns "Visible text" and "Another text".
// Hidden text is not included.

// textContent retrieves all text regardless of CSS visibility.
console.log(box.textContent);
// Returns "Visible text", "Hidden text", and "Another text".

// Setting the text replaces all child elements.
box.innerText = "New text";

element.innerText is a property that gets or sets the visible text of an HTML element. It is similar to element.textContent, but unlike textContent, innerText excludes text from elements hidden via CSS and returns only what is actually rendered on screen.

element.innerText accesses layout information, causing the browser to recalculate the layout each time it is called. Calling it repeatedly on many elements inside a loop may degrade performance. If you do not need to account for visibility, using element.textContent is more efficient.

When setting text, both element.innerText and element.textContent replace all existing child elements with a text node. HTML tags are treated as literal strings and are not parsed as markup. If you need the value to be interpreted as HTML, use element.innerHTML instead.