Benchmark: 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 = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye, cruel world!" }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
innerHtml

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Test name	Executions per second
innerText	1395.3 Ops/sec
innerHtml	2111422.0 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 benchmarking test cases and explain what is being tested, along with their pros and cons.

**Benchmark Definition:**

The benchmark measures the performance difference between three string manipulation methods in JavaScript:

1. `innerText`
2. `innerHTML`
3. `textContent`

**Options Compared:**

These two options are compared:

* `innerText`: Sets the text content of an HTML element without changing its HTML structure.
* `innerHTML`: Sets the inner HTML of an HTML element, including the HTML structure and any child elements.

**Pros and Cons:**

### `innerText`:

Pros:

* Faster, as it only sets the text content without modifying the HTML structure.
* More efficient for cases where you want to update the text content without changing the underlying HTML.

Cons:

* Does not set the inner HTML of child elements, which might lead to unexpected behavior if those elements are referenced elsewhere in your code.
* Not supported by some browsers or older versions of Chrome.

### `innerHTML`:

Pros:

* Sets both the text content and the HTML structure of an element.
* Can be used with any HTML element, including nested ones.

Cons:

* Slower than `innerText`, as it needs to parse and generate new HTML structures.
* More memory-intensive due to the overhead of creating new DOM elements.

**Library:**

There is no library mentioned in this benchmark. The tests only use built-in JavaScript features.

**Special JS Feature or Syntax:**

The test case uses a simple `while` loop to repeat an operation 1000 times, demonstrating performance under load.

Other Alternatives:

* Instead of using a `while` loop, you could use a `for...of` loop with a large array or a string repetition function like `Array.prototype.fill()`.
* You might also consider testing with different input sizes (e.g., numbers or strings) to see how performance scales.
* For more complex scenarios, you could test the impact of these operations on a larger DOM tree or with multiple elements.

Keep in mind that this benchmark is specifically designed to compare the performance differences between `innerText` and `innerHTML`, so exploring alternative methods might not yield meaningful results.

Related benchmarks:

innerHTML vs innerText vs textContent (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml

Created: 4 years ago by: Guest

Jump to the latest result

innerText

innerHtml

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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