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.
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.
<!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
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 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
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)