Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode vs innerHTML(template)
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode (deep) vs innerHTML
Created:
3 years ago
by:
Guest
Jump 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 template = document.createElement('template'); while(true) { n++; template.innerHTML = '<div><p class="font-bold">Hello!</p></div>'; list.push(template.content); 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:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark explores the efficiency of three methods for creating new DOM elements in JavaScript: **Method 1: `createElement`:** * **Description:** This method involves repeatedly using `document.createElement('div')` and `document.createElement('p')` to create new `div` and `p` elements individually, then appending the paragraph element as a child of each `div`. This approach builds DOM elements piece by piece. * **Pros:** Straightforward and explicit in its construction process. * **Cons:** Can be less performant than other methods, especially when creating many elements, due to the repeated calls to `createElement`. **Method 2: `cloneNode(true)`:** * **Description:** A template `div` with a paragraph is created initially. Then, in a loop, `cloneNode(true)` is used to create a deep copy of this template element for each new element required. * **Pros:** Often the most performant method as it avoids repeatedly constructing DOM elements from scratch. Clones pre-existing structure. * **Cons:** Requires an initial setup step to create the template. **Method 3: `innerHTML` with a Template:** * **Description:** A `template` element is used to store the HTML for a single `div` containing a paragraph. In a loop, `template.innerHTML` is used to set the content of the template, and then `template.content` (which represents the live DOM fragment) is added to the target list. * **Pros:** Can be efficient if done correctly. The HTML string manipulation can be faster than direct element creation in some cases. * **Cons:** Potentially slower for very large or complex templates due to browser parsing overhead. More prone to issues with injection vulnerabilities if not carefully handled (escaping user input). **Alternatives:** * **Virtual DOM Libraries (React, Vue):** These libraries use a virtual representation of the DOM, which significantly optimizes updates and element creation. * **Document Fragment:** A `DocumentFragment` is a lightweight way to create multiple elements in memory before adding them to the actual DOM. This can improve performance for large batches of elements. **Key Considerations:** * The choice of method depends on the specific use case, size of the DOM manipulation, and other factors like potential security risks. * Profiling your code with tools like Chrome DevTools is essential to determine the most efficient approach in your particular scenario.
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?