---
title: "Override Text Content with Inner text"
slug: "override-text-content-with-inner-text"
updated: 2024-09-05T09:19:22Z
published: 2024-09-05T09:19:22Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Capture the Text of an Element using innerText()

#### What is innerText and textContent?

In JavaScript, `innerText` and `textContent` are two properties that are used to access and modify the text content of an element on a web page. By default, when you select an element using Whatfix, the element text is captured using textContent().

Here are some key differences between the two:

| innerText | textContent |
| --- | --- |
| Retrieves the visible text content of an element. | Retrieves the content of an element, including all text and nested elements. |
| Excludes text that is hidden with CSS or rendered invisible due to its parent’s visibility settings. | Ignores the style or visibility of the element. |
| Returns the formatted and styled text content. | Returns the raw text content as a string. |

For example, consider the following code snippet:

```
<div id="test">
  Hello <span style="display: none;">world</span>!
</div>

let element = document.getElementById("example");
console.log(element.textContent); // Output: Hello world!
console.log(element.innerText); // Output: Hello !
```

In this snippet, the element with the ID test contains a hidden element with the text world. Here's how the output varies:

- element.textContent outputs “Hello world!” (including the hidden text).
- element.innerText outputs “Hello!” (excluding the hidden text).

#### Why should I override Text Content with Inner Text?

When **Override Text Content with Inner text** is enabled, instead of capturing the textContent property of selected elements, Whatfix captures the innerText property. Here’s why:

- Visibility: By using innerText, only the text content visible to the user on the screen is captured.
- Hidden Elements: Certain text elements may be hidden or styled in a way that makes them invisible to the user. Despite this, they are still captured by the textContent property. Using innerText ensures accuracy.

Use the following steps to override textContent with innerText:

1. On the Whatfix Guidance dashboard, click **Settings**. ![ia_left_nav_settings](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_settings.png)
2. Click **Advanced customisation**. ![ia_settings_advanced%20configuration](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_settings_advanced%20configuration.png)
3. Click **Technical configuration**. ![ac_tech config.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ac_tech%20config.png)
4. Click **Add preferences**. ![tech config_add prefrences.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_add%20prefrences.png)

1. Click **Common Properties**. ![tech config_common properties.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_common%20properties.png)
2. Select the **Override text content with inner text** checkbox. ![tech config_enable override text content .png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_enable%20override%20text%20content%20.png)
3. Click **Add**. ![tech config_add button.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_add%20button.png)
4. Enable the **Override text content with inner text** toggle. ![tech config_override text content toggle.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_override%20text%20content%20toggle.png)
5. Click **Save**. ![tech config_save.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_save.png)

## Related

- [Reselect Elements to manage UI changes](/reselecting-elements-to-manage-ui-changes.md)