Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
innerHTML vs innerText vs textContent P3
(version: 0)
Benchmark.js
P3
Comparing performance of:
innerHTML vs innerText vs textContent
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='el'>Hello, World!</div>
Tests:
innerHTML
let i = 1000; while (i--) { el.innerHTML = "Goodbye, cruel world!" }
innerText
let i = 1000; while (i--) { el.innerText = "Goodbye, cruel world!" }
textContent
let i = 1000; 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
innerHTML
innerText
textContent
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=498175" width="100%" height="500px"></iframe>
textContent
466/s
innerText
148/s
innerHTML
93/s
View exact numbers
Test name
Executions per second
✓
textContent
466 Ops/sec
innerText
148 Ops/sec
innerHTML
93 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations. **Benchmark Overview** The benchmark tests three different approaches to update the text content of an HTML element: `innerHTML`, `innerText`, and `textContent`. The test is run on a Chrome 120 browser on a Windows desktop platform. **Test Options** 1. **`innerHTML`**: This option sets the inner HTML of the element, including the element's tag name, attributes, and child nodes. 2. **`innerText`**: This option sets only the text content of the element. 3. **`textContent`**: This option sets both the text content and the data attribute (if present) of the element. **Pros and Cons** * `innerHTML`: + Pros: Faster, as it updates the entire HTML structure, including attributes and child nodes. + Cons: May lead to security vulnerabilities if user input is not properly sanitized, as it can execute arbitrary JavaScript code. * `innerText`: + Pros: Safer, as it only sets text content and doesn't execute any code. However, slower due to the extra DOM manipulation required. + Cons: Slower than `innerHTML`, but more secure. * `textContent`: + Pros: Balances speed with security, as it updates both text content and data attributes (if present). Faster than `innerText`. + Cons: May not be supported in older browsers or environments. **Library Usage** None of the test cases use any external libraries. However, the benchmark relies on the DOM API to manipulate the HTML element. **Special JS Features/Syntax** None mentioned in this specific benchmark. **Other Considerations** * **Browser Support**: The benchmark is run on Chrome 120, which may not be representative of other browsers or environments. * **Device Platform**: The test is run on a Windows desktop platform, which may not be relevant to mobile devices or other platforms. * **Test Environment**: The benchmark runs in a controlled environment, but real-world scenarios may introduce additional factors that affect performance and security. **Alternatives** Other approaches to update text content could include: 1. `outerHTML`: Similar to `innerHTML`, but also updates the element's tag name and attributes. 2. Using a template engine or string replacement library to render HTML templates. 3. Utilizing a third-party library for DOM manipulation, such as jQuery. Keep in mind that each approach has its trade-offs and may be suited for specific use cases or performance-critical applications.
Related benchmarks
innerText vs innerHtml
innerText vs innerHTML vs textContent
innerHTML vs textContent vs innerText
textContent vs innerHTML vs innerText
Comments
Confirm delete:
Do you really want to delete benchmark?