Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
textContent vs innerText
(version: 0)
f
Comparing performance of:
textc vs innerh
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="container"></div>
Script Preparation code:
var node = document.getElementById('container'); for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));
Tests:
textc
var node = document.getElementById('container'); node.textContent = '';
innerh
var node = document.getElementById('container'); node.innerHTML = '';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
textc
innerh
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=611837" width="100%" height="500px"></iframe>
innerh
6.0M/s
textc
5.9M/s
View exact numbers
Test name
Executions per second
✓
innerh
6,030,693 Ops/sec
textc
5,886,774 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the provided benchmark test. **What is being tested?** The benchmark tests two approaches to clearing text content of an HTML element: `textContent` and `innerHTML`. The test creates 1000 HTML elements in a container, which are then cleared using these two methods. The goal is to determine which method is faster. **Options compared:** * `textContent`: This property sets or returns the text content of an element without changing its structure. * `innerHTML`: This property sets or returns the HTML content of an element, including elements and their attributes. **Pros and Cons:** * **textContent**: Pros: + Faster (according to the benchmark results) + Only clears the text content, leaving the element's structure intact * Cons: + Does not change the element's structure, which might be desirable in some cases * `innerHTML`: Pros: + Changes the element's structure if new HTML is provided + Includes elements and their attributes in the cleared value * Cons: + Slower (according to the benchmark results) + Clears more data than necessary (i.e., elements, attributes, etc.) **Library used:** In this test, no specific library is mentioned. However, it's likely that the standard JavaScript DOM API is being used. **Special JS feature/syntax:** None are explicitly mentioned in this test case. If there were any special features or syntax, they would be relevant to the results and conclusions drawn from the benchmark. **Benchmark preparation code:** The script prepares a container element by appending 1000 HTML elements using `appendChild`. The resulting HTML structure is then cleared using either `textContent` or `innerHTML`. **Html preparation code:** A simple HTML element (`<div>`) with an ID of "container" is created and served as the test data. **Benchmark results:** The benchmark results show that `textContent` is faster than `innerHTML`. The exact execution times are provided, which can be used to inform future optimizations or implementations. **Other alternatives:** Some alternative approaches to clearing text content or HTML elements include: * Using a CSS rule to hide the element (e.g., `display: none;`) * Replacing the element with an empty string using `element.replaceWith('')` * Using a library like jQuery to clear the content * Using a custom implementation that clears the element's structure and text content Keep in mind that these alternatives might have different performance characteristics, depending on the specific use case and requirements.
Related benchmarks
createTextNode vs textContent vs innerText
createTextNode vs textContent vs innerText vs innerHTML
createTextNode vs textContent vs innerText vs append
createTextNode vs textContent vs innerText vs innerHTML
Comments
Confirm delete:
Do you really want to delete benchmark?