Benchmark: innerHTML vs textContent 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!"

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: 24 days ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
innerText	1540667.6 Ops/sec
innerHtml	14440818.0 Ops/sec
textContent	7376078.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The test case compares the performance of three methods to set the content of an HTML element: `innerHTML`, `textContent`, and `innerText` (also known as `node.textContent` in modern JavaScript).

**Options Compared**

* `innerHTML`: sets the inner HTML of an element, which includes both the text content and any markup.
* `textContent`: sets only the text content of an element, excluding any markup.
* `innerText`: sets only the text content of an element, without considering any markup or whitespace.

**Pros and Cons**

* **`innerHTML`**: Pros:
	+ Can set both text content and markup (e.g., `<span>hello</span>`).
	+ May be more convenient for simple use cases.
Cons:
	+ Can lead to security issues if the input is not sanitized, as it can execute arbitrary JavaScript code.
	+ Can result in slower performance due to the need to parse and sanitize the input.
* **`textContent`**: Pros:
	+ Faster than `innerHTML`, as it doesn't require parsing or sanitizing markup.
	+ More secure than `innerHTML`, as it prevents the execution of arbitrary JavaScript code.
Cons:
	+ May not be as convenient for simple use cases that include markup.
* **`innerText` (or `node.textContent`)**: Pros:
	+ Faster than both `innerHTML` and `textContent`, as it only considers text content.
	+ More secure than `innerHTML`, but less intuitive than `textContent`.
Cons:
	+ May not be well-supported in older browsers or versions of JavaScript.

**Library Usage**

None of the test cases explicitly use a library, although some libraries (e.g., jQuery) might have optimized implementations for these methods.

**Special JS Features/Syntax**

No special features or syntax are mentioned. The test cases only focus on comparing the performance of different methods for setting text content.

**Other Alternatives**

If you need to set text content in an HTML element, other alternatives could include:

* Using a template engine (e.g., Handlebars) to render and set the text content.
* Utilizing a library like jQuery or React to manage DOM updates and optimize performance.
* Considering alternative approaches, such as using CSS styles to control the appearance of elements.

Keep in mind that these alternatives might introduce additional dependencies or complexity, so it's essential to evaluate their trade-offs based on your specific use case.

Related benchmarks:

innerHTML vs textContent vs innerText (version: 0)

innerHTML vs textContent vs innerText test case

Comparing performance of: innerText vs innerHtml vs textContent

Created: 5 months 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 llama3.2:3b, generated 2 months ago):