Element.innerText

Get and set the rendered text of an element (and omit the markup).

The Element.innerText property returns only rendered text, similar to what a user would be able to select with their cursor or the keyboard when highlighting text. Any HTML elements included in a string when setting content are automatically encoded and rendered as-is.

<div class="greeting">
	<style type="text/css">
		p {
			color: rebeccapurple;
		}
	</style>
	<p hidden>This is not rendered.</p>
	<p>Hello world!</p>
</div>

let elem = document.querySelector('.greeting');

// Get text content
// returns "Hello world!"
let text = elem.innerText;

// Set text content
// This completely replaces whats there, including any HTML elements
elem.innerText = 'We can dynamically change the content.';

// Add text to the end of an element's existing content
elem.innerText += ' Add this after what is already there.';

// Add text to the beginning of an element's existing content
elem.innerText = 'We can add this to the beginning. ' + elem.innerText;

// HTML elements are automatically encoded and rendered as-is
elem.innerText = '<p>See you later!</p>';

⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.

Find this useful? You can support my work by purchasing an annual membership.