Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
innerHTML vs textContent
(version: 0)
Benchmark.js
well..
Comparing performance of:
textContent vs innerHtml
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='hello'>Hello, World!</div>
Script Preparation code:
let el = document.querySelector("#hello");
Tests:
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 (2)
Previous results
Fork
Test case name
Result
textContent
innerHtml
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 15 on iOS 15.5
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=502834" width="100%" height="500px"></iframe>
innerHtml
1.3M/s
textContent
12K/s
View exact numbers
Test name
Executions per second
✓
innerHtml
1,272,248 Ops/sec
textContent
12,113 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Explanation** The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark compares the performance of two approaches: using `innerHTML` and `textContent` to update the text content of an HTML element. **Options Compared** Two options are being compared: 1. **innerHTML**: This method sets the HTML content of an element directly, which can lead to issues with HTML parsing, escaping, and validation. 2. **textContent**: This method sets the text content of an element, without affecting its HTML structure or attributes. **Pros and Cons** * **innerHTML**: + Pros: Simple and straightforward. + Cons: Can lead to security vulnerabilities (e.g., XSS), performance issues due to HTML parsing, and DOM tree fragility. * **textContent**: + Pros: Safer, more efficient, and easier to maintain. + Cons: May not work as expected in all cases (e.g., nested elements). **Library Used** In the provided benchmark code, no specific JavaScript library is used. However, `document.querySelector` is used to select an HTML element, which suggests that a modern browser's DOM API is being utilized. **Special JS Feature or Syntax** None of the special features or syntax are mentioned in the benchmark definition. **Other Alternatives** There are other alternatives for updating text content in JavaScript, such as: * Using `innerText` (supported by Internet Explorer and some older browsers) * Creating a new text node and appending it to the element's child nodes * Using a library like jQuery or a custom solution to manipulate the DOM **Benchmark Preparation Code** The provided script preparation code creates an HTML element with the ID "hello" and assigns its content using both `innerHTML` and `textContent`. The HTML preparation code sets up the basic HTML structure. **Individual Test Cases** Each test case runs a loop that updates the text content of the selected element using either `innerHTML` or `textContent`. The loop iterates 1000 times, which is likely chosen to demonstrate performance differences between the two approaches.
Related benchmarks
innerHTML vs innerText vs textContent
setting innerHTML vs innerText vs textContent
innerHTML vs innerText vs textContent 2
innerHTML vs innerText vs textContent 3
innerHTML vs innerText vs textContent with lower i
Comments
Confirm delete:
Do you really want to delete benchmark?