# 
#  Overview
The **`textContent`** is the `DOM` property that is used to `set` text content for the `HTML` element or `get` the text content written inside that element. 

If you `set` the text using `textContent` for an element, then the other child elements will be removed and only this text will be added in that element. This means that it will override the element content.
##
## Code

Let's use `textContent` on an element to `get` its text.

<!DOCTYPE html>
<html>
<body>

<p id="elem">To get the text from the element click the button.</p>

<button onclick="change()">GET Text</button>
<button onclick="setText()">SET Text</button>

<script>
function change() {
  var x = document.getElementById("elem");
  var y = x.textContent;
  console.log(y);
}
function setText() {
  var x = document.getElementById("elem");
  x.textContent = "New text";
}
</script>

</body>
</html>


codemirror

console

# 
#  Code explanation

* In line # 5: We have a `<P>` element with id `elem`. Inside this paragraph tag, we write some text.
* In line # 7: We have written a `button` tag having a function `change()`. This function will be called when the user clicks the button.


* In line # 8: Added another button with `setText` function, to `set` the text content in the `p` element.

* From lines # 10-14: We have written the `JavaScript` code in the `script` tag. We have defined the function `change()` which will be called when the user clicks the button from the `HTML` page.


* In line # 12: In function `change()`, we will get the `<p>` element using `document.getElementById()` and passing the id `elem`.

* In line # 13: We will apply the property `textContent` on the element object and store its output in a variable.
* In line # 13: Print the value returned by the property `textContent` using `console.log()`.

* In line # 16: The `setText()` function to set new text content in the element.

* In line # 17: We will get the `<p>` element using `document.getElementById()` and passing the id `elem`.

* In line # 18: Applying `textContent` on the `p` element and assigning new text content to it.
##
## Output

When we click the `GET Text` button the console prints the exact text value which is in the `<p>` paragraph tag. And when `SET` button is clicked new text is added to it.

What is DOM property "textContent"?

textContent sets or retrieves an element's text, removing any child elements and overriding existing content.