Modifying Text and HTML

To change what users see on a web page, you often need to update the content of elements dynamically using JavaScript. There are three main properties for modifying an element's content: textContent, innerText, and innerHTML. Each serves a different purpose and behaves differently depending on your needs.

The textContent Property

Gets or sets all the text inside an element, including text in hidden elements, and ignores any HTML tags. This is useful when you want to insert or retrieve plain text without any formatting or markup.

The innerText Property

Also gets or sets the text inside an element, but it takes CSS styles into account. It will not return the text of hidden elements, and it may format whitespace to reflect how the text would actually appear to the user. Use innerText when you want to show or get the visible text as it appears on the page.

The innerHTML Property

Gets or sets the HTML markup contained within an element. This allows you to insert or retrieve not just text, but also tags and other HTML structures. Use innerHTML when you need to add or modify HTML elements inside another element.