Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs innerText vs textContent Setting
(version: 0)
Comparing performance of:
innerText vs innerHtml vs textContent
Created:
2 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; let el = document.querySelector("#hello"); while (i--) { el.innerText = "setting"; }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHTML = "setting"; }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "setting"; }
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:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15
Browser/OS:
Safari 17 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=500770" width="100%" height="500px"></iframe>
innerText
7K/s
innerHtml
7K/s
textContent
6K/s
View exact numbers
Test name
Executions per second
✓
innerText
6,986 Ops/sec
innerHtml
6,546 Ops/sec
textContent
6,423 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The provided benchmark measures the performance differences between three common DOM properties: `innerText`, `innerHTML`, and `textContent`. These properties are used to set or get the text content of an HTML element. **Options Compared** The benchmark compares the execution speed of setting these three properties on the same HTML element. The test case is designed to simulate a scenario where the property value needs to be updated 1000 times. **Pros and Cons of Each Approach** * `innerText`: + Pros: Fastest execution time, as it only updates the text content without affecting the element's structure. + Cons: May not work correctly in all scenarios (e.g., when the element has nested elements). * `innerHTML`: + Pros: Works correctly with nested elements and can be used to update the entire HTML content of an element. + Cons: Slower execution time due to the overhead of parsing and updating the HTML structure. * `textContent`: + Pros: Balances speed and correctness, as it only updates the text content while ignoring any nested HTML structure. + Cons: May not work correctly with some browser implementations or older versions. **Library Used** There is no library explicitly used in this benchmark. However, the code uses the `document.querySelector` method to select an element by its ID, which is a standard JavaScript API for querying DOM elements. **Special JS Feature/Syntax** The benchmark does not use any special JavaScript features or syntax that would be specific to certain browsers or environments. **Other Alternatives** For similar benchmarks, you can consider testing other properties like `outerHTML` (similar to `innerHTML`, but also includes the element's attributes) or exploring different libraries and frameworks for DOM manipulation.
Related benchmarks
innerHTML vs innerText vs textContent
setting innerHTML vs innerText vs textContent
innerHTML vs innerText vs textContent ..
innerHTML vs innerText vs textContent with lower i
Comments
Confirm delete:
Do you really want to delete benchmark?