Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs innerText vs textContent with lower i
(version: 0)
blah blah
Comparing performance of:
innerText vs innerHtml
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='hello'>Hello, World!</div>
Script Preparation code:
let el = document.querySelector("#hello");
Tests:
innerText
let i = 100; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye, cruel world!" }
innerHtml
let i = 100; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerText
innerHtml
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=611438" width="100%" height="500px"></iframe>
innerHtml
3.1M/s
innerText
26K/s
View exact numbers
Test name
Executions per second
✓
innerHtml
3,101,036 Ops/sec
innerText
25,525 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons. **Benchmark Definition** The benchmark measures the performance of two HTML string manipulation methods: `innerHTML` and `innerText`. Both methods are used to update the text content of an HTML element. **Options Compared** 1. **innerHTML**: This method directly sets the inner HTML of an element, which includes both the text content and any HTML structure (e.g., `<p>`, `<span>`, etc.) that might be present. 2. **innerText**: This method only updates the text content of an element without modifying its HTML structure. **Pros and Cons** * **innerHTML**: + Pros: Easier to use when you need to update both text and HTML structure. + Cons: Can be slower and more memory-intensive since it needs to parse and manipulate the entire HTML string, which can lead to slower performance on complex pages. * **innerText**: + Pros: Faster and more efficient since it only updates the text content without modifying the HTML structure, making it suitable for large datasets or complex pages. + Cons: Requires more code to update both text and HTML structure if needed. **Library Used** None is mentioned in the provided benchmark definition. However, some libraries like jQuery (not used here) might use `innerHTML` internally to simplify DOM manipulation. **Special JavaScript Features/Syntax** There are no special features or syntax mentioned in this benchmark. **Other Considerations** * Modern browsers have optimized `innerText` and `innerHTML` for performance, especially when using modern CSS selectors like `querySelector`. * Using `innerHTML` can lead to security vulnerabilities if not sanitized properly (e.g., injecting user-inputted HTML). **Alternatives** For similar benchmarks: * Testing the performance of `textContent`, which is a more concise way to set text content without relying on `innerText` and `innerHTML`. * Evaluating different string manipulation methods, such as using a templating engine like Handlebars or Mustache. * Comparing the performance of DOM manipulation methods like `appendChild`, `insertAdjacentHTML`, or `createElement`. Keep in mind that this benchmark focuses specifically on the performance comparison between `innerHTML` and `innerText`.
Related benchmarks
innerHTML vs innerText vs textContent
setting innerHTML vs innerText vs textContent
innerText vs innerHTML (performance 3)
Comments
Confirm delete:
Do you really want to delete benchmark?