Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs innerText vs textContent1231232
(version: 0)
Comparing performance of:
textContent vs innerHtml vs innerText
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<span id='hello'>Hello, World!</span>
Tests:
textContent
let i = 10; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye"; }
innerHtml
let i = 10; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye"; }
innerText
let i = 10; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye"; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
textContent
innerHtml
innerText
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0
Browser/OS:
Chrome 131 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=570753" width="100%" height="500px"></iframe>
innerHtml
1.7M/s
textContent
689K/s
innerText
166K/s
View exact numbers
Test name
Executions per second
✓
innerHtml
1,736,083 Ops/sec
textContent
689,266 Ops/sec
innerText
165,630 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is tested, the different options compared, their pros and cons, and other considerations. **Benchmark Overview** The benchmark tests three ways to set text content on an HTML element: `innerHTML`, `innerText`, and `textContent`. The test case uses a simple JavaScript loop to update the text content of an `<span>` element with the ID "hello". **Library/Functions Used** In this benchmark, no external library is used. However, the `querySelector` function is used to select the HTML element. * `querySelector`: This is a standard JavaScript method for selecting elements in HTML documents. It returns the first element that matches the specified selector. **Options Compared** The three options compared are: 1. **innerHTML**: The `innerHTML` property sets or gets the HTML content of an element. 2. **innerText**: The `innerText` (also known as `textContent` for DOM elements) property sets or gets the text content of an element, excluding any inline styles or attributes. 3. **textContent**: The `textContent` property is similar to `innerText`, but it can include the text inside certain HTML elements like `<style>` tags. **Pros and Cons** Here's a brief overview of each option: * **innerHTML**: * Pros: Can be used for both plain text and HTML content. * Cons: Can lead to security vulnerabilities due to XSS (Cross-Site Scripting) attacks, as it can execute any JavaScript code. Also, updates the element's DOM structure, which might not be desirable in some cases. * **innerText**: * Pros: Generally safer than `innerHTML`, as it doesn't allow executing JavaScript code and only considers text content. * Cons: Does not include HTML tags or inline styles; may lead to formatting issues if the element contains complex HTML structures. Also, this was a deprecated property since ECMAScript 5. * **textContent**: * Pros: Similar to `innerText`, but can include the text inside certain HTML elements like `<style>` tags and preserves more HTML structure information. It's also not deprecated since ECMAScript 5. **Other Considerations** When choosing between these options, consider the specific requirements of your project: * If you need to set plain text content with no formatting restrictions, `innerText` might be suitable. * If you need to set HTML content or complex text structures, `innerHTML` is a better choice. However, use it with caution due to security concerns and potential DOM updates. * For maximum flexibility and safety, `textContent` could be the best option. **Alternatives** Other alternatives exist for setting element text content: 1. **DOM manipulation**: Using methods like `appendChild`, `insertAdjacentText`, or `replaceChild` to manually update an element's text content is possible but requires more code. 2. **String operations**: In some cases, you might use string concatenation (`"Hello World"` + `" " + "World")` instead of the DOM property methods for simple text updates. However, using standard DOM property methods (`innerHTML`, `innerText`, or `textContent`) is generally more efficient and convenient than these alternatives.
Related benchmarks
innerHTML vs textContent vs innerText
textContent vs innerHTML vs innerText
Comments
Confirm delete:
Do you really want to delete benchmark?