Benchmark: textContent vs innerHTML vs innerText

HTML Preparation code:

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

Script Preparation code:

var el = document.getElementById('hello');

Tests:

innerText
el.innerText = "Goodbye, cruel world!"
innerHtml
el.innerHTML = "Goodbye, cruel world!"
textContent
el.textContent = "Goodbye, cruel world!"

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

textContent

11.6M/s

innerText

2.2M/s

innerHtml

1.1M/s

Fastest: textContent (10.9x faster)

View exact numbers

✓ textContent: 11,579,819 ops/sec
• innerText: 2,243,480 ops/sec
• innerHtml: 1,064,252 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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

textContent

13.9M/s

innerText

2.3M/s

innerHtml

1.1M/s

View exact numbers

Test name	Executions per second
✓ textContent	13,887,165 Ops/sec
innerText	2,250,400 Ops/sec
innerHtml	1,066,781 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided JSON represents a benchmark test case that compares three approaches for setting the text content of an HTML element: `textContent`, `innerHTML`, and `innerText`. Here's a breakdown of what's being tested:

**Benchmark Definition**

The "Name" field specifies the name of the benchmark, which is "textContent vs innerHTML vs innerText". The "Description" field provides a brief explanation of the test case.

**Script Preparation Code**

The script preparation code retrieves an HTML element with the id "hello" using `document.getElementById('hello')`. This element will be used to test the three approaches.

**Html Preparation Code**

The HTML preparation code defines a simple HTML structure with a paragraph element containing the text "Hello, World!" and assigns it to the previously retrieved element. This creates an executable environment for testing.

**Individual Test Cases**

The benchmark consists of three individual test cases, each defining a different approach:

1. `innerText`: Sets the innerText property of the element using the string "Goodbye, cruel world!".
2. `innerHtml`: Sets the innerHTML property of the element using the string "Goodbye, cruel world!".
3. `textContent`: Sets the contentText property of the element using the string "Goodbye, cruel world!".

Now, let's discuss the pros and cons of each approach:

* **innerText**: This method is relatively fast because it only sets the inner text without parsing or manipulating the HTML markup. However, some browsers may not support this property (e.g., older versions of Internet Explorer), and it may not work correctly with certain HTML elements.
* **innerHTML**: This method is slower than `innerText` because it parses and manipulates the entire HTML structure, which can lead to more complex parsing and rendering processes. Additionally, this approach can be more prone to security vulnerabilities if used with user-input data.
* **textContent**: This method falls in between `innerText` and `innerHTML` in terms of speed and complexity. It sets the content text without parsing the HTML markup but may still involve some level of manipulation. The support for this property is generally better than `innerText`, making it a safer choice.

**Library Usage**

None of these test cases rely on external libraries, so there are no additional dependencies to consider.

**Special JS Features or Syntax**

The benchmark does not use any special JavaScript features or syntax that require explanation.

**Other Considerations**

When running this benchmark, users can expect the results to indicate which approach is the fastest for setting text content in their browser. The executions per second value represents how many times each test case was executed during a single second, providing insight into the performance differences between the three approaches.

For developers who want to optimize their code, understanding these differences can help them choose the most efficient method for their use cases. Additionally, this benchmark provides a useful resource for identifying potential bottlenecks in text content manipulation and encouraging best practices for web development.

textContent vs innerHTML vs innerText (version: 0)

textContent vs innerHTML vs innerText test case

Comparing performance of: `innerText vs innerHtml vs textContent`

Created: 2 years ago by: Guest

Go to the latest result

innerText

innerHtml

textContent

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

textContent vs innerHTML vs innerText (version: 0)

textContent vs innerHTML vs innerText test case

Comparing performance of: innerText vs innerHtml vs textContent

Created: 2 years ago by: Guest

Go to the latest result

innerText

innerHtml

textContent

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `innerText vs innerHtml vs textContent`