Benchmark: setting innerHTML vs innerText vs textContent

HTML Preparation code:

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

Script Preparation code:

let el = document.querySelector("#hello");

Tests:

innerText
let i = 10000; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye, cruel world!" }
innerHtml
let i = 10000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }
textContent
let i = 10000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye, cruel world!" }

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

innerHtml

125K/s

textContent

2K/s

innerText

186/s

Fastest: innerHtml (671.8x faster)

View exact numbers

✓ innerHtml: 125,289 ops/sec
• textContent: 1,504 ops/sec
• innerText: 186 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
innerHtml
textContent

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/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

innerHtml

110K/s

innerText

50/s

textContent

21/s

View exact numbers

Test name	Executions per second
✓ innerHtml	110,186 Ops/sec
innerText	50 Ops/sec
textContent	21 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and results.

**Benchmark Definition**

The benchmark measures the performance of three different JavaScript methods for setting text content in an HTML element: `innerHTML`, `innerText`, and `textContent`.

Each test case creates a variable `i` set to 10,000, selects an HTML element with the id "hello" using `document.querySelector`, and then runs a while loop that sets the text content of the element to a string using one of the three methods. The loop is executed 10,000 times.

**Test Cases**

1. **innerText**: This test case uses the `innerText` property to set the text content of the HTML element.
2. **innerHtml**: This test case uses the `innerHTML` property (note: there's a typo in the JSON, it should be `innerHTML`, not `innerHtml`) to set the text content of the HTML element. However, setting innerHTML is generally discouraged when only updating the text content, as it can lead to unnecessary DOM mutations.
3. **textContent**: This test case uses the `textContent` property to set the text content of the HTML element.

**Benchmark Results**

The results show the execution time per second for each test case on a Firefox 130 browser running on Mac OS X 10.15:

1. **innerHtml**: The fastest method, with an average execution time of approximately 38635 executions per second.
2. **textContent**: The slowest method, with an average execution time of approximately 37 executions per second.
3. **innerText**: The middle ground, with an average execution time of approximately 30 executions per second.

**Pros and Cons**

* `innerHTML`:
	+ Pros: Fastest method for setting text content.
	+ Cons: Can lead to unnecessary DOM mutations, which can be costly in terms of performance and maintainability.
* `innerText`:
	+ Pros: Efficient for setting text content without modifying the HTML structure.
	+ Cons: May not work correctly in certain edge cases (e.g., when working with elements containing child nodes).
* `textContent`:
	+ Pros: Most straightforward and intuitive method for setting text content.
	+ Cons: Slowest method, which can impact performance-critical code.

**Other Considerations**

When choosing a method, consider the specific requirements of your application:

* If you need to update only the text content without modifying the HTML structure, `innerText` or `textContent` might be suitable choices.
* However, if you're working with complex HTML structures and need to maintain performance, using `innerHTML` is generally recommended.

**Library Usage**

No external libraries are used in this benchmark definition.

**Special JS Feature or Syntax**

The test cases use a simple while loop, which doesn't involve any special JavaScript features or syntax.

setting innerHTML vs innerText vs textContent (version: 0)

blah blah

Comparing performance of: `innerText vs innerHtml vs textContent`

Created: 3 years ago by: Guest

Go to the latest result

innerText

innerHtml

textContent

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

setting innerHTML vs innerText vs textContent (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml vs textContent

Created: 3 years ago by: Guest

Go to the latest result

innerText

innerHtml

textContent

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

Related benchmarks

Comparing performance of: `innerText vs innerHtml vs textContent`