textContent method and other methods. For lesson 1 and 2 in this series, be sure to check out this link and this link.
In this blog post, we will be checking how to use the
textContent methods. You can use this method to set or get text for an element.
Node.textContent property is used to get and set the text of element including its CSS properties. Ayn HTML elements included are automatically encoded and rendered as is.
element.innerText method does the same task as node.textContent, but it gets and sets the
rendered text of an element and omits the markup. It returns only rendered text, similar to what a user sees in the final page
We can get the text content of an element by accessing either the
textContent property. You can append in the beginning or at the end of an element’s existing content.
/* Getting the Text Content */ //Storing the output in a variable let headerText = document.querySelector('.block-header'); console.log(headerText); //Using the `innerText` or `textContent` property we can get the text content // `innerText` will only return the rendered message headerText.innerText // WELCOME MESSAGE // `textContent will return the output with trailing spaces and HTML code` headerText.textContent //'\n Welcome message\n ' /* Setting the Text Content */ let headerText = document.querySelector('.block-header'); console.log(headerText); //Using the `innerText` or `textContent` property we can set the text content // `innerText` will only return the rendered message headerText.innerText += ' THIS IS SPARTA! // WELCOME MESSAGE THIS IS SPARTA! // `textContent will return the output with trailing spaces and HTML code` headerText.textContent //'\n Welcome message\n This is SPARTA!'
Now, let’s apply this learning into a live project. In this project, we will track the number of characters a visitor is typing in a text area. The counter will increase/decrease based on user interaction
Head over to the Playground to check out the project. Don’t forget to switch the debug logs.