Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs innerHTML (3000)
(version: 0)
createElement vs innerHTML (3000)
Comparing performance of:
createElement vs innerHTML
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class='x'></div>
Tests:
createElement
let fragment = new DocumentFragment(); for (let i = 0; i < 3000; i++) { fragment.appendChild(document.createElement("div")); } document.querySelector(".x").append(fragment);
innerHTML
let fragment = ""; for (let i = 0; i < 3000; i++) { fragment += "<div></div>"; } document.querySelector(".x").innerHTML = fragment;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
innerHTML
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/134.0.0.0 Safari/537.36
Browser/OS:
Chrome 134 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=594165" width="100%" height="500px"></iframe>
innerHTML
2K/s
createElement
1K/s
View exact numbers
Test name
Executions per second
✓
innerHTML
1,770 Ops/sec
createElement
1,076 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'd be happy to explain what's being tested in the provided benchmark. The benchmark compares two approaches for generating HTML content: `innerHTML` and `createElement`. Both methods are used to create and append elements to the DOM (Document Object Model). **Options compared:** 1. **innerHTML**: This method involves concatenating a string of HTML elements using the `+` operator or template literals, and then setting the innerHTML of an element to this concatenated string. 2. **createElement**: This method involves creating individual elements using the `document.createElement()` function, appending these elements to a DocumentFragment, and then appending the fragment to the DOM. **Pros and Cons:** * **innerHTML**: + Pros: Easy to read and write, doesn't require explicit DOM manipulation. + Cons: Can lead to performance issues if used excessively due to string concatenation and DOM mutations. Also, some modern browsers have limitations on using `innerHTML` for security reasons (e.g., preventing XSS attacks). * **createElement**: + Pros: More efficient for large amounts of HTML content, as it avoids the overhead of string manipulation and DOM mutations. + Cons: Requires explicit DOM management, which can be error-prone and less readable. **Library usage:** The benchmark uses a `DocumentFragment` object, which is part of the HTML5 specification. A DocumentFragment is a way to group elements in the DOM without actually adding them to the document tree. It's used here to reduce the number of DOM mutations by appending multiple elements at once. **Special JS feature or syntax:** None mentioned in this specific benchmark. **Other alternatives:** * **String replacement**: Instead of concatenating strings, you could use a library like String.prototype.replace() to replace placeholders with HTML elements. * **DOM manipulation libraries**: Libraries like jQuery or React can simplify DOM manipulation and might offer better performance for large-scale applications. To prepare for this benchmark, software engineers should be familiar with the basic concepts of HTML, CSS, and JavaScript, as well as common techniques for working with the DOM. They should also be aware of potential performance implications when using `innerHTML` versus creating elements programmatically.
Related benchmarks
createTextNode vs innerHTML vs innerText
createTextNode vs textContent vs innerText vs innerHTML (for reading)
createElement vs cloneNode vs innerHTML for multi elements
createElement vs cloneNode vs innerHTML vs innerHTML(single innerHTML)
Comments
Confirm delete:
Do you really want to delete benchmark?