Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerText vs textContent vs innerHTML
(version: 0)
Comparing performance of:
innerText vs textContent vs innerHTML
Created:
4 years ago
by:
Guest
Jump 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 = "Goodbye, cruel world!" }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye, cruel world!" }
innerHTML
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
innerText
textContent
innerHTML
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
llama3.2:3b
, generated one year ago):
The provided JSON represents a JavaScript microbenchmarking test case that compares the performance of three different ways to update the text content of an HTML element: `innerHTML`, `textContent`, and `innerText`. **What is tested?** In this benchmark, we're testing how fast each approach can set or update the text content of an HTML element. The tests are designed to simulate a scenario where a large amount of data needs to be updated, which is common in web applications. **Options compared:** 1. **innerHTML**: This method sets the entire HTML content of an element by setting its `innerHTML` property. 2. **textContent**: This method sets only the text content of an element by setting its `textContent` property. 3. **innerText**: This method is specific to Internet Explorer and sets only the text content of an element, without including any HTML markup. **Pros and cons of each approach:** 1. **innerHTML**: * Pros: Simple and straightforward way to update an element's content. * Cons: Can be slower because it requires parsing and rendering the entire HTML content, which can lead to performance issues with large amounts of data. 2. **textContent**: * Pros: Faster than `innerHTML` because it only updates the text content without affecting the HTML markup. * Cons: Requires support for the `textContent` property in browsers that don't natively support it (e.g., older versions of Internet Explorer). 3. **innerText**: * Pros: Fastest method among the three, as it only updates the text content and doesn't require parsing or rendering HTML markup. * Cons: Only supported in Internet Explorer, which limits its applicability. **Library usage:** None of the benchmark tests explicitly use any libraries, but they do rely on the `document` object and its methods to interact with the DOM. **Special JS feature or syntax:** The tests don't use any special JavaScript features or syntax that would require specific knowledge or interpretation. The focus is on comparing the performance of three different approaches to update an element's text content. **Benchmark preparation code:** The script preparation code retrieves a HTML element from the document using `document.querySelector("#hello")`. This element is then used in each test case. **Other alternatives:** If you're looking for alternative ways to compare the performance of updating an element's text content, you could consider: * Using other methods, such as `outerHTML` or `DOMParser`, which might offer similar performance characteristics. * Implementing your own custom solution using JavaScript and DOM manipulation APIs. * Utilizing browser-specific features, such as WebAssembly or NativeMessage, to optimize the benchmark. Keep in mind that these alternatives would require significant changes to the test code and might not be directly comparable to the original benchmark.
Related benchmarks:
innerHTML vs innerText vs textContent
innerText vs textContent + trim (HTML)
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?