Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode vs innerHTML 2
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode (deep) vs innerHTML
Created:
2 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(true)); if(n===100000) break; }
innerHTML
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.innerHTML); 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:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Browser/OS:
Chrome 125 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=526538" width="100%" height="500px"></iframe>
innerHTML
26/s
cloneNode (deep)
12/s
createElement
5/s
View exact numbers
Test name
Executions per second
✓
innerHTML
26 Ops/sec
cloneNode (deep)
12 Ops/sec
createElement
5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks. **Benchmark Overview** The provided JSON represents a benchmark test that compares three different approaches to create new DOM elements: `createElement`, `cloneNode (deep)`, and `innerHTML`. The test aims to determine which approach is faster for creating new DOM elements before insertion. **Test Cases** There are three individual test cases: 1. `createElement`: This test case creates a new `div` element with an appended `p` element containing the text "Hello!". The resulting array of `div` elements is then pushed onto a list 100,000 times. 2. `cloneNode (deep)`: This test case starts by creating a single `div` element with an appended `p` element containing the text "Hello!". Then, it uses the `cloneNode(true)` method to create deep clones of this `div` element and appends them onto a list 100,000 times. 3. `innerHTML`: This test case creates a new `div` element with an appended `p` element containing the text "Hello!". The resulting `innerHTML` value is then pushed onto a list 100,000 times. **Options Compared** The three options compared are: * **createElement**: Creates a new DOM element using the `document.createElement()` method. * **cloneNode (deep)**: Creates a deep clone of an existing DOM element using the `cloneNode(true)` method and appends it to an array. * **innerHTML**: Retrieves the HTML content of an existing DOM element using the `innerHTML` property. **Pros and Cons** Here's a brief summary of the pros and cons of each approach: 1. **createElement**: * Pros: Fast, easy to use, and creates a new, independent DOM element. * Cons: Can be slower for large numbers of elements due to the overhead of creating multiple DOM nodes. 2. **cloneNode (deep)**: * Pros: Creates a deep clone of an existing element, which can be useful for preserving the original element's state. * Cons: Slower than `createElement` since it involves cloning an entire element tree. 3. **innerHTML**: * Pros: Fast and convenient, as it only retrieves the HTML content of an existing element. * Cons: Not suitable for creating new DOM elements, as it only returns the text content. **Library Usage** None of the test cases use any external libraries or frameworks. **Special JS Features or Syntax** There are no special JavaScript features or syntax mentioned in the benchmark definitions. The code is straightforward and uses standard JavaScript constructs. **Alternatives** If you need to create new DOM elements, you may also consider using other approaches such as: * Using a library like jQuery's `append()` method, which can be faster than creating individual DOM elements. * Utilizing Webpack or another bundler to optimize the creation of multiple DOM elements. * Leveraging browser-specific features like HTML5's `<template>` element to create isolated DOM fragments. However, these alternatives may not provide a direct comparison with the three options tested in this benchmark.
Related benchmarks
createElement vs cloneNode(false)
createElement vs cloneNode()
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?