# How to change a DOM node value
> Learn how to change a DOM node value by setting its innerText property, and how to grab the element first with the Selectors API document.querySelector method.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-10-23 | Updated: 2026-08-07 | Topics: [Web Platform](https://flaviocopes.com/tags/platform/) | Canonical: https://flaviocopes.com/change-dom-node-value/
To change the value of a DOM node, set its `innerText` property:
```js
element.innerText = 'x'
```
To lookup the element, combine it with the [Selectors API](https://flaviocopes.com/selectors-api/):
```js
document.querySelector('#today .total')
```
Putting the two together, here's a complete example. Say the page shows an order total:
```html
Total: $0.00
```
```js
const total = document.querySelector('#total')
total.innerText = '$45.99'
```
The text inside the span changes on screen immediately.
## innerText vs textContent
`textContent` does a similar job:
```js
total.textContent = '$45.99'
```
For setting a plain string, the two are almost interchangeable. The differences show up in the details.
`innerText` is aware of rendering. Reading it gives you the text as the user sees it, and setting it with newline characters turns them into `
` elements.
`textContent` works on the raw DOM. It includes text from hidden elements when reading, and it's faster, since it doesn't need any layout information.
## What if the new value contains HTML?
`innerText` treats the string as plain text. Set it to `'paid'` and the page shows the tags literally.
To insert actual markup, use `innerHTML`:
```js
total.innerHTML = '$45.99'
```
Be careful here. Never pass user-provided strings to `innerHTML`, that opens the door to XSS attacks. Stick to `innerText` or `textContent` for anything that comes from users.
## Pitfall: the element is not found
If `querySelector()` matches nothing, it returns `null`, and the next line throws:
```js
const total = document.querySelector('#totals') //typo, returns null
total.innerText = '$45.99' //TypeError: Cannot set properties of null
```
Check the selector for typos first. If the selector is right, your script probably ran before the element existed. Load the script with the `defer` attribute, or place the `