# How to update the text content of a DOM element in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Mar 8, 2020, updated Oct 8, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-update-element-text

> Learn how to update the text of an HTML element by using the innerText and textCotent properties in vanilla JavaScript.

In last [article](https://attacomsian.com/blog/javascript-update-element-html-markup), we looked at how to update the HTML markup of a [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) element in vanilla JavaScript. In this brief tutorial, you'll learn how to get and set the text of an element.

JavaScript provides two properties, `innerText` and `textContent`, to get and set the text contents of an HTML element and all its child nodes.

If you set a new value of `innerText` or `textContent`, all child nodes will be removed and replaced with a single text node containing the specified string.

Let us say we have the following `<p>` element:

```markup
<p id="intro">My name is <b>John Doe</b>!</p>
```

The following example shows how to **get the text content** of the above element:

```javascript
// grab element
const elem = document.querySelector('#intro')

// get text content
console.log(elem.innerText)
// OR
console.log(elem.textContent)

// My name is John Doe!
```

To completely **replace the existing text contents**, just set a new value for `innerText`:

```javascript
// replace existing text
elem.innerText = 'Hey there! I am Atta'
```

The `innerText` property is very similar to the `textContent` property. However, there are two differences:

1. `innerText` returns the text contents all elements **except** `<script>` and `<style>` elements, while `textContent` returns text contents of **all** elements.
2. `innerText` can **not** be used to get text contents of elements that are [hidden with CSS](https://attacomsian.com/blog/javascript-hide-show-dom-elements), but `textContent` can be used.

**Read Next:** [How to create a DOM element using JavaScript](https://attacomsian.com/blog/javascript-create-dom-element)