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!" }

Historical Performance Data aggregated from 98 community runs

Desktop Results:

Chrome 62 runs

innerHtml

907K/s

innerText

1K/s

Fastest: innerHtml (621.9x faster)

View exact numbers

✓ innerHtml: 907,014 ops/sec
• innerText: 1,459 ops/sec

Firefox 26 runs

innerHtml

688K/s

innerText

636/s

Fastest: innerHtml (1080.5x faster)

View exact numbers

✓ innerHtml: 687,735 ops/sec
• innerText: 636 ops/sec

Mobile Results:

Chrome 10 runs

innerHtml

328K/s

innerText

565/s

Fastest: innerHtml (579.9x faster)

View exact numbers

✓ innerHtml: 327,708 ops/sec
• innerText: 565 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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 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

innerHtml

2.1M/s

innerText

1K/s

View exact numbers

Test name	Executions per second
✓ innerHtml	2,111,422 Ops/sec
innerText	1,395 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.

innerHTML vs innerText vs textContent (version: 0)

blah blah

Comparing performance of: `innerText vs innerHtml`

Created: 4 years ago by: Guest

Go to the latest result

innerText

innerHtml

Historical Performance Data aggregated from 98 community runs

Desktop Results:

Chrome 62 runs

Firefox 26 runs

Mobile Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

innerHTML vs innerText vs textContent (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml

Created: 4 years ago by: Guest

Go to the latest result

innerText

innerHtml

Historical Performance Data aggregated from 98 community runs

Desktop Results:

Chrome 62 runs

Firefox 26 runs

Mobile Results:

Chrome 10 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`