Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs innerText vs textContent 2
(version: 0)
blah blah
Comparing performance of:
innerText vs innerHtml vs textContent
Created:
3 years 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 = 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>
Run tests (3)
Previous results
Fork
Test case name
Result
innerText
innerHtml
textContent
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=610944" width="100%" height="500px"></iframe>
innerHtml
468K/s
textContent
363/s
innerText
307/s
View exact numbers
Test name
Executions per second
✓
innerHtml
468,187 Ops/sec
textContent
363 Ops/sec
innerText
307 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
setting innerHTML vs innerText vs textContent
innerHTML vs innerText vs textContent 3
innerHTML vs innerText vs textContent with lower i
Comments
Confirm delete:
Do you really want to delete benchmark?