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

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

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of three different methods for updating the content within an HTML element: `innerText`, `innerHTML`, and `textContent`.

**Here's a breakdown:**

* **`innerText`**: This method sets the text content of an element, stripping out any HTML tags. It's generally the fastest option as it avoids parsing and rendering complex HTML structures. 
* **`innerHTML`**: This method sets the entire HTML content of an element, including tags. While more versatile for displaying dynamic HTML, it can be slower due to the need to parse and render the entire HTML string.
* **`textContent`**:  This method, similar to `innerText`, sets only the plain text content of an element without any HTML formatting. It's often a good balance between simplicity and performance.

**Pros and Cons:**

| Method | Pros                 | Cons                    |
|--------|-----------------------|-------------------------|
| `innerText` | Fastest, avoids HTML parsing | Doesn't handle HTML tags  |
| `innerHTML` | Most versatile, handles any HTML | Can be slow due to parsing |
| `textContent` |  Good balance of speed and simplicity |  Doesn't handle HTML tags |

**Considerations:**

* **Complexity:** If your content is primarily text, `innerText` or `textContent` are the most efficient choices. For complex HTML structures, `innerHTML` might be necessary.
* **Performance:** Always benchmark your options to determine the best solution for your specific use case.

**Alternatives:**

While not directly compared in this benchmark, there are other ways to update element content:

* **Direct DOM manipulation:**  Modifying child nodes directly can sometimes be faster than setting entire content strings.
* **Virtual DOM libraries (React, Vue):** These libraries manage updates efficiently, often by only changing the necessary parts of the DOM, leading to performance gains.

Let me know if you have any other questions!

Latest run results:

Run details: (Test run date: 3 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerText	49.3 Ops/sec
innerHtml	146481.4 Ops/sec
textContent	380.2 Ops/sec

Related benchmarks:

setting innerHTML vs innerText vs textContent (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml vs textContent

Created: one year ago by: Guest

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):