Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs textContent vs innerText
(version: 0)
innerHTML vs textContent vs innerText test case
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:
var el = document.getElementById('hello');
Tests:
innerText
el.innerText = "Goodbye, cruel world!"
innerHtml
el.innerHtml = "Goodbye, cruel world!"
textContent
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 5.1; rv:52.0) Gecko/20100101 Firefox/52.0
Browser/OS:
Firefox 52 on Windows XP
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=592793" width="100%" height="500px"></iframe>
innerHtml
118.5M/s
textContent
589K/s
innerText
323K/s
View exact numbers
Test name
Executions per second
✓
innerHtml
118,514,424 Ops/sec
textContent
589,061 Ops/sec
innerText
322,556 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. **Benchmark Overview** The test case compares the performance of three methods to set the content of an HTML element: `innerHTML`, `textContent`, and `innerText` (also known as `node.textContent` in modern JavaScript). **Options Compared** * `innerHTML`: sets the inner HTML of an element, which includes both the text content and any markup. * `textContent`: sets only the text content of an element, excluding any markup. * `innerText`: sets only the text content of an element, without considering any markup or whitespace. **Pros and Cons** * **`innerHTML`**: Pros: + Can set both text content and markup (e.g., `<span>hello</span>`). + May be more convenient for simple use cases. Cons: + Can lead to security issues if the input is not sanitized, as it can execute arbitrary JavaScript code. + Can result in slower performance due to the need to parse and sanitize the input. * **`textContent`**: Pros: + Faster than `innerHTML`, as it doesn't require parsing or sanitizing markup. + More secure than `innerHTML`, as it prevents the execution of arbitrary JavaScript code. Cons: + May not be as convenient for simple use cases that include markup. * **`innerText` (or `node.textContent`)**: Pros: + Faster than both `innerHTML` and `textContent`, as it only considers text content. + More secure than `innerHTML`, but less intuitive than `textContent`. Cons: + May not be well-supported in older browsers or versions of JavaScript. **Library Usage** None of the test cases explicitly use a library, although some libraries (e.g., jQuery) might have optimized implementations for these methods. **Special JS Features/Syntax** No special features or syntax are mentioned. The test cases only focus on comparing the performance of different methods for setting text content. **Other Alternatives** If you need to set text content in an HTML element, other alternatives could include: * Using a template engine (e.g., Handlebars) to render and set the text content. * Utilizing a library like jQuery or React to manage DOM updates and optimize performance. * Considering alternative approaches, such as using CSS styles to control the appearance of elements. Keep in mind that these alternatives might introduce additional dependencies or complexity, so it's essential to evaluate their trade-offs based on your specific use case.
Related benchmarks
innerText vs innerHtml
createTextNode vs textContent vs innerText vs innerHTML (for reading)
textContent vs innerHTML vs innerText
Comments
Confirm delete:
Do you really want to delete benchmark?