Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode (not deep) vs innerHTML
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode (deep) vs innerHTML
Created:
4 years ago
by:
Guest
Go to the latest result
Tests:
createElement
const list = []; let n = 0; while(true) { n++; const div = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(p); list.push(div); if(n===100000) break; }
cloneNode (deep)
const list = []; let n = 0; const div = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(p); while(true) { n++; list.push(div.cloneNode(false)); if(n===100000) break; }
innerHTML
const list = []; let n = 0; while(true) { n++; const div = document.createElement('div'); div.innerHTML = '<p class="font-bold">Hello!</p>'; list.push(div); if(n===100000) break; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
createElement
cloneNode (deep)
innerHTML
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/144 Version/11.1.1 Safari/605.1.15
Browser/OS:
Safari 11 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=626248" width="100%" height="500px"></iframe>
cloneNode (deep)
63/s
innerHTML
15/s
createElement
11/s
View exact numbers
Test name
Executions per second
✓
cloneNode (deep)
63 Ops/sec
innerHTML
15 Ops/sec
createElement
11 Ops/sec
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark tests three different methods of creating new DOM elements in JavaScript and compares their performance: **1. `createElement`:** * **Method:** Creates a new `<div>` element using `document.createElement('div')`, adds a child `<p>` element, sets its text content, and appends the paragraph to the div. This is repeated for 100,000 elements. * **Pros:** Generally considered a performant way to create DOM elements. It's direct and efficient. * **Cons:** Can be more verbose than other methods if you need to set multiple attributes or styles. **2. `cloneNode(false)`:** * **Method:** Creates a single `<div>` element initially, adds a child `<p>` element with text content as before. Then, it uses `div.cloneNode(false)` (which creates a shallow copy) repeatedly to add new div elements to the list. * **Pros:** Potentially faster than `createElement` if you're working with complex elements that already have content and attributes set. * **Cons:** Still requires creating the initial element, which adds overhead. Shallow cloning might not be ideal if your elements need deep copies of nested elements. **3. `innerHTML`:** * **Method:** Creates a new `<div>` element using `document.createElement('div')`, then sets its inner HTML content to `<p class="font-bold">Hello!</p>`. * **Pros:** Very concise and can be useful when you have pre-defined HTML snippets you want to insert. * **Cons:** Can be slower than the other methods because it involves parsing and manipulating the entire HTML string, which might lead to unnecessary work if your content is simple. **Alternatives (Not tested in this benchmark):** * **Template Literals:** Modern JavaScript offers template literals for creating dynamic HTML strings, potentially offering better performance than `innerHTML` depending on the complexity of your content. * **DOM Fragment API:** The DOMFragment API allows you to create and manipulate a collection of nodes without immediately adding them to the document, which can be more efficient when dealing with large amounts of content. **Considerations for Choosing a Method:** * **Complexity of Elements:** For simple elements, `createElement` is often the fastest. For complex elements, `cloneNode(false)` might offer performance gains if you're reusing the same structure repeatedly. * **Frequency of Element Creation:** If you're creating many elements, the overhead of individual methods can add up. Optimize for the specific use case. * **Readability and Maintainability:** Choose a method that is clear and easy to understand for your team. Remember, benchmarking results can vary depending on factors like browser, device, and JavaScript engine.
Related benchmarks
createElement vs cloneNode(false)
createElement vs cloneNode v3
createElement vs cloneNode vs cloneNode-lite
createElement vs deep cloneNode vs cloneNode
Comments
Confirm delete:
Do you really want to delete benchmark?