Benchmark: createElement vs innerHTML for creating elements in DOM

HTML Preparation code:

<div id="container"></div>

Tests:

createElement
const container = document.getElementById('container'); container.innerHTML = ''; for (let i = 0; i < 1000; i++) { const div = document.createElement('div'); const p = document.createElement('d'); p.classList.add('font-bold'); p.textContent = 'Hello'+i+'!'; div.appendChild(p); container.appendChild(div); } /*cleanup*/ container.innerHTML = '';
innerHTML
const container = document.getElementById('container'); container.innerHTML = ''; for (let i = 0; i < 1000; i++) { container.innerHTML += '<div><p class="font-bold">Hello'+i+'!</p></div>'; } /*cleanup*/ container.innerHTML = '';
innerHTML append
const container = document.getElementById('container'); container.innerHTML = ''; for (let i = 0; i < 1000; i++) { container.append('<div><p class="font-bold">Hello'+i+'!</p></div>'); } /*cleanup*/ container.innerHTML = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
innerHTML
innerHTML append

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 OpenWave/94.4.4376.38

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
createElement	430.2 Ops/sec
innerHTML	1.4 Ops/sec
innerHTML append	1968.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, the different approaches, their pros and cons, and other considerations.

**Benchmark Overview**

The provided benchmark compares three ways to create DOM elements: `createElement`, `innerHTML`, and `innerHTML append`. The goal is to measure which method is faster for creating a large number of elements.

**Test Cases**

There are three test cases:

1. **createElement**: This test case creates each element individually using the `createElement` method, then appends it to the container.
2. **innerHTML**: This test case sets the inner HTML of the container to an empty string, then appends a large number of elements using the `innerHTML` property.
3. **innerHTML append**: Similar to the previous test case, but instead of setting the inner HTML and appending individual elements, it uses the `append` method to add all elements at once.

**Library Used: None**

There are no libraries used in these test cases.

**Special JS Feature/Syntax: None**

None of the test cases use any special JavaScript features or syntax. They only rely on standard DOM methods and properties.

**Pros and Cons of Each Approach**

1. **createElement**:
	* Pros: More control over element creation, can be more efficient for large numbers of elements.
	* Cons: Requires more code, can be slower for small numbers of elements due to the overhead of creating individual elements.
2. **innerHTML**:
	* Pros: Faster for small numbers of elements, less code required.
	* Cons: Less control over element creation, can lead to performance issues with large numbers of elements due to DOM manipulation.
3. **innerHTML append**:
	* Pros: Similar to `innerHTML` but faster because it uses a single method call instead of setting and appending individually.
	* Cons: Requires specific browser support (Chrome 128 in this case) for the `append` method.

**Other Considerations**

* The benchmark is run on a desktop platform with Chrome 128, which may not be representative of other platforms or browsers.
* The number of elements created is large (1000), which may amplify performance differences between the approaches.
* The cleanup step at the end (setting the inner HTML to an empty string) may introduce additional overhead.

**Alternatives**

If you want to test other methods for creating DOM elements, such as:

* Using a library like jQuery or React
* Using a virtual DOM implementation
* Creating elements using CSS templates

You can create new benchmark definitions and test cases with these approaches.

Related benchmarks:

createElement vs innerHTML for creating elements in DOM (version: 0)

Speed of inserting DOM elements by various methods

Comparing performance of: createElement vs innerHTML vs innerHTML append

Created: 2 years ago by: Guest

Jump to the latest result

createElement

innerHTML

innerHTML append

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):