![](/javascript-textcontent/cover_image.png)
When manipulating DOM elements in the browser, you can use the textContent
property to retrieve the text content of a certain element and all its descendants.
For example, let’s say you have the following HTML <body>
tag:
<body>
<div id="partOne">
<p>Roses are red</p>
<p>Violets are blue</p>
<p>Sunflowers are yellow</p>
</div>
</body>
You can use textContent
property to grab the text content of the <div>
tag as show below:
let str = document.getElementById("partOne").textContent;
console.log(str);
The output of textContent
property will be as follows:
Roses are red
Violets are blue
Sunflowers are yellow
As you can see from the output above, The textContent
property only get the text inside your element, but not the HTML tags. When you need to get the HTML tag as well, you need to use the innerHTML
property instead of textContent
property:
let str = document.getElementById("partOne").innerHTML;
console.log(str);
The output of innerHTML
property will be as follows:
<p>Roses are red</p>
<p>Violets are blue</p>
<p>Sunflowers are yellow</p>
You can also change the textContent
property, which will remove all existing child elements, replacing it with a single text as follows:
document.getElementById("partOne").textContent = "Hello World!";
The HTML <body>
tag will be modified as shown below:
<body>
<div id="partOne">Hello World!</div>
</body>
Please keep in mind that the textContent
property is not supported by Internet Explorer 8 or below.