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);

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: 3 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0

Browser/OS: Firefox 113 on Ubuntu

View result in a separate tab

Test name	Executions per second
createElement	469.5 Ops/sec
insertAdjacentHTML	767.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

createElement vs insertAdjacentHTML but actually works (version: 0)

Comparing performance of: createElement vs insertAdjacentHTML

Created: 4 years ago by: Guest

Jump to the latest result

createElement

insertAdjacentHTML

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):