JavaScript textContent Property

Introduction

Accessing the HTML elements and their content is important to be able to manipulate the web and make interesting interactions from images to texts.

The DOM represents the document structure in HTML and allows us to use JavaScript to work with each part of the structure which are nodes (and base-level objects). With this, we can change the structure, style, and content.

Advertisement

The content here we are interested in is the text content, and the way to access or update them in JavaScript. In this article, we cover all the bases.

 

Using JavaScript textContent property

As we said, the DOM has nodes and objects that we can access using JavaScript, and for us to access the text content in an HTML document, we need the textContent property.

The 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 string or null. In addition, it returns the content of all elements including the script and style elements.

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 textContent script.

In the script element, the JavaScript is present. The getElementById method is applied on the button element identifier - btn - and an onclick event is attached to it.

Attached to the event is the JavaScript expression to access the text content. The expression uses the getElementById on the div element with an identifier - 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 content binding.

Advertisement
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>JavaScript text content</h1>
        <div id="demo">
            <p>This text that will be displayed in an Alert Window</p>
        </div>
        <button id="btn">Get Text</button>

        <script>
            document.getElementById("btn").onclick = function () {
                const content = document.getElementById("demo").textContent;
                alert(content);
            };
        </script>
    </body>
</html>

Output

The screenshots show a "JavaScript text content" heading, followed by a "This text that will be displayed in an Alert Window" paragraph text and a "Get Text" button

 

On clicking the Get Text Button

The browser with an alert window that has the "This text that will be displayed in an Alert Window" text

 

If we want to change the text content, we can do so by assigning the new text to the textContent property of the said element. We will simply add the following JavaScript statements to the code above

document.getElementById("demo").textContent =
                    "New text content has been added";

Output

The screenshot show a "JavaScript text content" heading, followed by a "New text content has been added" paragraph text and a "Get Text" button

 

Summary

Text content makes up a lot of webpages (or HTML documents) and knowing how to access and update them is useful and with the JavaScript textContent property we can achieve such pretty easily.

 

References

Document Object Model (DOM) - Web APIs | MDN (mozilla.org)
Node.textContent - Web APIs | MDN (mozilla.org)

 

Didn't find what you were looking for? Perform a quick search across GoLinuxCloud

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can either use the comments section or contact me form.

Thank You for your support!!

Leave a Comment

X