Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
createElement vs innerHTML(template)
(version: 0)
Benchmark.js
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs innerHTML
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
createElement
const list = []; let n = 0; while(true) { n++; list.push( document.createElement('div') .appendChild( Object.assign(document.createElement('p'), { className: 'font-bold', textContent: 'Hello!' }) ) ); if(n===100000) break; }
innerHTML
const list = []; let n = 0; const template = document.createElement('template'); while(true) { n++; template.innerHTML = '<div><p class="font-bold">Hello!</p></div>'; list.push(template.content.cloneNode(true)); if(n===100000) break; }
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:
2 days ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0
Browser/OS:
Firefox 146 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=634088" width="100%" height="500px"></iframe>
createElement
7/s
innerHTML
5/s
View exact numbers
Test name
Executions per second
✓
createElement
7 Ops/sec
innerHTML
5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its various components. **Benchmark Definition** The benchmark definition is represented by two JSON objects: one for the overall benchmark and individual test cases. The overall benchmark definition provides some metadata about the benchmark, such as its name, description, and preparation code. However, in this case, both the script preparation code and HTML preparation code are set to null, which means that the browser will generate these elements automatically. **Individual Test Cases** The benchmark consists of two individual test cases: "createElement" and "innerHTML". These test cases aim to compare the performance of creating new DOM elements using two different approaches: 1. **createElement**: This approach creates a new `div` element using `document.createElement()` and then appends a child element (a `p` element with specific text content) using `appendChild()`. The process is repeated 100,000 times. 2. **innerHTML**: This approach uses a `template` element to create the HTML structure, sets its innerHTML to a string containing the desired HTML, and then clones this template and pushes the cloned element into an array. **Options Compared** The benchmark compares the performance of two approaches: * `createElement`: Creates new DOM elements manually using `document.createElement()` and appends child elements. * `innerHTML`: Uses the `innerHTML` property to create the desired HTML structure and then clones it. **Pros and Cons of Each Approach** * **createElement**: This approach provides more control over the creation process, as you can easily add or remove attributes from individual elements. However, it may be slower due to the overhead of creating and appending elements. * **innerHTML**: This approach is generally faster, especially for large amounts of data, since it allows the browser to optimize the HTML structure and rendering. Additionally, this method eliminates the need for explicit appending operations. **Library Usage** The benchmark uses the `template` element, which is a standard HTML5 element that allows you to create HTML structures as strings and then clone them. The `innerHTML` property is used to set the content of the template element. **Special JS Feature/Syntax** This benchmark does not utilize any special JavaScript features or syntax. It only leverages standard DOM methods like `document.createElement()`, `appendChild()`, and `innerHTML`. **Other Alternatives** For creating new DOM elements, you can also consider other approaches, such as: * **fragment**: Using the DocumentFragment API to create a temporary container element that can be appended to. * **element.append().append()` (Modern Approach): A newer approach using modern browser APIs like `Element.append()` and its variants. These alternatives may offer improved performance or more efficient code for specific use cases.
Related benchmarks
createElement vs cloneNode (not deep) vs innerHTML
createElement vs cloneNode vs innerHTML vs innerHTML(single innerHTML)
Comments
Confirm delete:
Do you really want to delete benchmark?