Benchmark: innerHTML vs innerText vs textContent 2

HTML Preparation code:

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

Script Preparation code:

let el = document.querySelector("#hello");

Tests:

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

Latest run results:

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

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
innerText	307.1 Ops/sec
innerHtml	468187.5 Ops/sec
textContent	363.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 JSON for the MeasureThat.net benchmark.

**Benchmark Definition**

The benchmark compares three different ways to update the text content of an HTML element in JavaScript: `innerHtml`, `innerText`, and `textContent`.

**Options Compared**

* `innerHtml`: Sets the inner HTML of an element, including the HTML tags.
* `innerText`: Sets the text content of an element without including the HTML tags.
* `textContent`: Sets the text content of an element, which can include HTML tags.

**Pros and Cons**

* **innerHtml**: Pros: works well for simple cases where you need to update the entire HTML structure. Cons: can lead to security vulnerabilities if used with user-inputted data, as it allows HTML injection.
* **innerText**: Pros: more secure than `innerHtml` when dealing with user-inputted data, as it prevents HTML injection. Cons: may not be suitable for cases where you need to update the entire HTML structure.
* **textContent**: Pros: a balance between `innerHtml` and `innerText`, as it allows HTML tags but still prevents most security issues. Cons: can lead to performance issues if the element's text content is large.

**Library Used**

None, this benchmark does not use any external libraries.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other Considerations**

The benchmark assumes that the test HTML elements have a `id` attribute set to "hello". The test code also uses `document.querySelector()` and `document.getElementById()` to retrieve the element by its ID.

**Alternatives**

If you want to write similar benchmarks, you can consider testing other JavaScript APIs or features, such as:

* DOM manipulation (e.g., `appendChild()`, `removeChild()`)
* Event handling (e.g., `addEventListener()`, `removeEventListener()`)
* CSS-related APIs (e.g., `getComputedStyle()`, `requestAnimationFrame()`)

Keep in mind that the performance and security implications of different JavaScript features can vary greatly depending on the context, so it's essential to consider these factors when writing benchmarks.

Related benchmarks:

innerHTML vs innerText vs textContent 2 (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml vs textContent

Created: 2 years ago by: Guest

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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