Benchmark: innerHTML vs innerText vs textContent1231232

HTML Preparation code:

<span id='hello'>Hello, World!</span>

Tests:

textContent
let i = 10; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye"; }
innerHtml
let i = 10; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye"; }
innerText
let i = 10; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
innerHtml
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
textContent	689265.6 Ops/sec
innerHtml	1736083.0 Ops/sec
innerText	165629.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, the different options compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark tests three ways to set text content on an HTML element: `innerHTML`, `innerText`, and `textContent`. The test case uses a simple JavaScript loop to update the text content of an `<span>` element with the ID "hello".

**Library/Functions Used**

In this benchmark, no external library is used. However, the `querySelector` function is used to select the HTML element.

*   `querySelector`: This is a standard JavaScript method for selecting elements in HTML documents. It returns the first element that matches the specified selector.

**Options Compared**

The three options compared are:

1.  **innerHTML**: The `innerHTML` property sets or gets the HTML content of an element.
2.  **innerText**: The `innerText` (also known as `textContent` for DOM elements) property sets or gets the text content of an element, excluding any inline styles or attributes.
3.  **textContent**: The `textContent` property is similar to `innerText`, but it can include the text inside certain HTML elements like `<style>` tags.

**Pros and Cons**

Here's a brief overview of each option:

*   **innerHTML**:
    *   Pros: Can be used for both plain text and HTML content.
    *   Cons: Can lead to security vulnerabilities due to XSS (Cross-Site Scripting) attacks, as it can execute any JavaScript code. Also, updates the element's DOM structure, which might not be desirable in some cases.
*   **innerText**:
    *   Pros: Generally safer than `innerHTML`, as it doesn't allow executing JavaScript code and only considers text content.
    *   Cons: Does not include HTML tags or inline styles; may lead to formatting issues if the element contains complex HTML structures. Also, this was a deprecated property since ECMAScript 5.
*   **textContent**:
    *   Pros: Similar to `innerText`, but can include the text inside certain HTML elements like `<style>` tags and preserves more HTML structure information. It's also not deprecated since ECMAScript 5.

**Other Considerations**

When choosing between these options, consider the specific requirements of your project:

*   If you need to set plain text content with no formatting restrictions, `innerText` might be suitable.
*   If you need to set HTML content or complex text structures, `innerHTML` is a better choice. However, use it with caution due to security concerns and potential DOM updates.
*   For maximum flexibility and safety, `textContent` could be the best option.

**Alternatives**

Other alternatives exist for setting element text content:

1.  **DOM manipulation**: Using methods like `appendChild`, `insertAdjacentText`, or `replaceChild` to manually update an element's text content is possible but requires more code.
2.  **String operations**: In some cases, you might use string concatenation (`"Hello World"` + `" " + "World")` instead of the DOM property methods for simple text updates.

However, using standard DOM property methods (`innerHTML`, `innerText`, or `textContent`) is generally more efficient and convenient than these alternatives.

Related benchmarks:

innerHTML vs innerText vs textContent1231232 (version: 0)

Comparing performance of: textContent vs innerHtml vs innerText

Created: 2 years ago by: Guest

Jump to the latest result

textContent

innerHtml

innerText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):