Table of Contents
Accessing the HTML elements and their content is important to be able to manipulate the web and make interesting interactions from images to texts.
textContent property represents the text content of a node and its descendants. Depending on the node we access, the return value of this instantaneous property can be
null. In addition, it returns the content of all elements including the
Let’s illustrate how to access the text content of a node within an HTML document by using HTML and JS within the same document. The HTML contains a
div element that houses a
p element with some text and a
button element that will trigger the
getElementById method is applied on the
button element identifier -
btn - and an
onclick event is attached to it.
getElementById on the
div element with an
demo - and applies the
textContent property to retrieve the text content bound to the
content binding. Afterward, we make use of the
alert() method to show the value of the
On clicking the
Get Text Button
If we want to change the text content, we can do so by assigning the new text to the
document.getElementById("demo").textContent = "New text content has been added";
textContent property we can achieve such pretty easily.