Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test text content
(version: 0)
Comparing performance of:
innerText vs textContent
Created:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var a = document.createElement('div');
Tests:
innerText
a.innerText = "toto";
textContent
a.textContent = "toto"
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerText
textContent
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark compares two ways to set text content within a `<div>` element in JavaScript: **Options Compared:** * **`a.innerText = "toto";`**: This sets the visible text content of the `<div>`. It handles HTML entities and might convert some special characters for display purposes. * **`a.textContent = "toto"`**: This directly sets the plain text content of the `<div>`, preserving any HTML tags within it. **Pros/Cons:** * **`innerText`:** Can be easier to use for simple text display as it automatically handles HTML entities. However, it might not be ideal if you need precise control over HTML structure or want to preserve embedded tags. * **`textContent`:** Gives you more control over the content since it treats everything literally. It's suitable when you need to preserve HTML tags or work with raw text data. **Considerations:** * **Context matters:** The best choice depends on your specific use case. If you are displaying simple text, `innerText` is often sufficient. If you are working with content that needs to be rendered as HTML, `textContent` is the way to go. * **Performance:** This benchmark shows that `textContent` can sometimes be faster than `innerText`, but the difference might not always be significant in real-world applications. **Alternatives:** While less common for direct text manipulation, consider these alternatives if your needs are different: * **DOM APIs for more complex manipulations:** For tasks beyond simple text setting (e.g., inserting elements, changing attributes), utilize the full power of DOM API methods like `appendChild`, `setAttribute`, etc. Let me know if you have any further questions about this benchmark or JavaScript's DOM manipulation!
Related benchmarks:
textContent vs innerText
createElement vs createDocumentFragment
createElement vs createDocumentFragment 1
Test 123123123
Comments
Confirm delete:
Do you really want to delete benchmark?