Benchmark: createElement vs insertAdjacentHTML but actually works

HTML Preparation code:

<div id="test"></div>

Tests:

createElement
newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { let newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement);
insertAdjacentHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

insertAdjacentHTML

883/s

createElement

480/s

Fastest: insertAdjacentHTML (1.8x faster)

View exact numbers

✓ insertAdjacentHTML: 883 ops/sec
• createElement: 480 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

insertAdjacentHTML

980/s

createElement

573/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentHTML	980 Ops/sec
createElement	573 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark compares two approaches to inserting or appending HTML content to an existing DOM element: `createElement` and `insertAdjacentHTML`. The benchmark aims to determine which approach is faster in creating 1000 elements with a specific class, and then appending those elements to another element.

**Options Compared**

Two options are compared:

1. **createElement**: This approach creates a new `div` element using the `document.createElement()` method, adds a class, and then appends it to another element using the `appendChild()` method.
2. **insertAdjacentHTML**: This approach constructs an HTML string using template literals or concatenation, and then inserts that content into an existing DOM element using the `insertAdjacentHTML()` method.

**Pros and Cons**

* **createElement**:
	+ Pros: It allows for more flexibility in terms of creating custom elements and their attributes.
	+ Cons: It can be slower due to the overhead of creating a new element, parsing its attributes, and appending it to another element.
* **insertAdjacentHTML**:
	+ Pros: It can be faster since it avoids creating a new element and instead inserts content directly into the DOM. Additionally, it allows for more efficient use of string resources.
	+ Cons: It may require more careful construction of the HTML string to ensure correct rendering and accessibility.

**Library and Purpose**

In the provided benchmark, there is no specific library being used. However, `insertAdjacentHTML` does rely on the `DOMTokenList` API, which is a part of the W3C standard for manipulating DOM tokens (e.g., classes, styles).

**Special JavaScript Feature or Syntax**

There isn't any special JavaScript feature or syntax mentioned in this benchmark.

**Other Considerations**

When choosing between these two approaches, consider the trade-offs:

* If you need to create custom elements or handle complex attributes, `createElement` might be a better choice.
* If you're building a large-scale web application with many repeated HTML patterns, `insertAdjacentHTML` could provide a performance benefit.

**Alternative Approaches**

Other alternatives to these two approaches include:

1. **useTemplateLiterals**: This involves using template literals (e.g., `${}`) to construct the HTML string directly.
2. **DOMParser**: You can use the `DOMParser` API to parse an HTML string and create DOM elements from it.

However, for most cases, `createElement` and `insertAdjacentHTML` remain viable options due to their simplicity and performance characteristics.

createElement vs insertAdjacentHTML but actually works (version: 0)

Comparing performance of: `createElement vs insertAdjacentHTML`

Created: 5 years ago by: Guest

Go to the latest result

createElement

insertAdjacentHTML

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

createElement vs insertAdjacentHTML but actually works (version: 0)

Comparing performance of: createElement vs insertAdjacentHTML

Created: 5 years ago by: Guest

Go to the latest result

createElement

insertAdjacentHTML

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `createElement vs insertAdjacentHTML`