Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs insertAdjacentHTML but actually works V2
(version: 0)
Comparing performance of:
createElement vs insertAdjacentHTML
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
createElement
const elemTpl = document.createElement("div"); elemTpl.classList.add("testClass"); newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { newElement.appendChild( elemTpl.cloneNode(true) ); } document.getElementById("test").appendChild(newElement);
insertAdjacentHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
insertAdjacentHTML
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/132.0.0.0 Safari/537.36
Browser/OS:
Chrome 132 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=584321" width="100%" height="500px"></iframe>
createElement
865/s
insertAdjacentHTML
703/s
View exact numbers
Test name
Executions per second
✓
createElement
865 Ops/sec
insertAdjacentHTML
703 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark definition and test cases to understand what is being tested. **Benchmark Definition** The benchmark measures the performance difference between two approaches: 1. `createElement`: Creating an HTML element using the `document.createElement()` method. 2. `insertAdjacentHTML`: Inserting HTML content into an element using the `insertAdjacentHTML()` method, specifically with the `beforeend` attribute. **Options Compared** The options being compared are: * Using `document.createElement()` to create a new HTML element and then appending it to another element (`createElement` approach). * Using `insertAdjacentHTML()` to insert multiple HTML elements into an existing element without creating intermediate elements (`insertAdjacentHTML` approach). **Pros and Cons** **createElement Approach:** Pros: * More control over the creation process, allowing for custom attributes, events, and styles. * Can be more flexible when dealing with complex HTML structures. Cons: * Requires more memory allocation and garbage collection due to creating multiple elements. * May lead to slower performance if many elements need to be created and appended. **insertAdjacentHTML Approach:** Pros: * Faster execution time since it involves less overhead than creating intermediate elements. * More efficient for large-scale rendering, as it reduces the number of DOM mutations. Cons: * Limited control over the creation process, making it harder to customize attributes or events. * May lead to slower performance if the resulting HTML is too complex or nested deeply. **Library and Purpose** None are mentioned in this specific benchmark. However, `insertAdjacentHTML()` is a modern HTML5 method that allows for efficient insertion of HTML content without creating intermediate elements. **Special JavaScript Features/Syntax** None are explicitly mentioned in this benchmark. **Other Considerations** 1. **Memory allocation**: Both approaches can lead to increased memory usage due to the creation of multiple elements. However, `insertAdjacentHTML()` might be more memory-efficient for large-scale rendering. 2. **DOM mutations**: The number of DOM mutations (additions or removals) affects performance. Creating many elements with `createElement` can lead to more mutations than using `insertAdjacentHTML`. 3. **Browser support**: Both methods are widely supported in modern browsers, but some older browsers might have issues with `insertAdjacentHTML`. **Alternative Approaches** 1. Using other HTML creation methods, such as: * `innerHTML`: Assigning HTML content directly to an element's innerHTML property. * `textContent`: Assigning text content directly to an element's textContent property. 2. Using library or framework-specific solutions, depending on the specific requirements and constraints of your project. Keep in mind that this benchmark is focused specifically on comparing the performance of these two approaches (`createElement` and `insertAdjacentHTML`). Other factors, like browser version, operating system, and hardware specifications, can also impact the results of similar benchmarks.
Related benchmarks
createElement vs insertAdjacentHTML but actually works
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement
insertAdjacentHtml vs innerHTML (no initial contents)
Comments
Confirm delete:
Do you really want to delete benchmark?