Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement22

Script Preparation code:

 box1 = document.createElement("div");

 box2 = document.createElement("div");
 box2HTML = box2.innerHTML;

Tests:

1) innerHTML +=
box1.innerHTML += box2HTML;
2) insertAdjacentHTML
box1.insertAdjacentHTML('beforeend', box2HTML);
3) appendChild
box1.appendChild(document.createElement("div"));
4) insertAdjacentElement
box1.insertAdjacentElement('beforeend', document.createElement("div"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1) innerHTML +=
2) insertAdjacentHTML
3) appendChild
4) insertAdjacentElement

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark compares four different ways to append or concatenate HTML content to an element:

1. `innerHTML`: Using the `innerHTML` property to set the inner HTML of an element.
2. `insertAdjacentHTML`: Using the `insertAdjacentHTML` method to insert HTML content into an element's DOM tree.
3. `appendChild`: Using the `appendChild` method to add a child element to another element.
4. `insertAdjacentElement`: Using the `insertAdjacentElement` method to insert a new element into an element's DOM tree.

**Test Cases**

Each test case compares two methods:

* The first method is `innerHTML +=` (appending content using `innerHTML`)
* The second method is either `insertAdjacentHTML`, `appendChild`, or `insertAdjacentElement` (inserting content into the DOM)

Here are some pros and cons of each approach:

**1. `innerHTML +=`**

Pros:

* Simple to use
* Works well for small amounts of content

Cons:

* Can be slow, especially with large amounts of content
* May cause issues if not used carefully (e.g., using it to concatenate strings can lead to unexpected behavior)

**2. `insertAdjacentHTML`**

Pros:

* Fast and efficient
* Works well for both small and large amounts of content

Cons:

* Requires a DOM node reference (`document.getElementById('nodeId')`)
* May have compatibility issues with older browsers

**3. `appendChild`**

Pros:

* Works well for both small and large amounts of content
* Does not require a DOM node reference

Cons:

* Can be slower than `insertAdjacentHTML`
* Requires creating an HTML element manually (e.g., `document.createElement('div')`)

**4. `insertAdjacentElement`**

Pros:

* Fast and efficient
* Works well for both small and large amounts of content

Cons:

* Requires a DOM node reference (`document.getElementById('nodeId')`)
* May have compatibility issues with older browsers

**Library: None**

None of the test cases use any external libraries.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax used in these test cases (e.g., arrow functions, async/await, etc.).

**Other Alternatives**

Some alternative methods for inserting content into an element's DOM tree include:

* `innerHTML` with a template string (`<div>${content}</div>`)
* Using a library like jQuery (although not explicitly mentioned in the benchmark)

Overall, the choice of method depends on the specific use case and performance requirements. For most cases, `insertAdjacentHTML` or `appendChild` are good choices due to their speed and flexibility. However, if you need to support older browsers or require less DOM manipulation, other methods may be more suitable.

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
1) innerHTML +=	2748776.5 Ops/sec
2) insertAdjacentHTML	1448633.1 Ops/sec
3) appendChild	1393674.0 Ops/sec
4) insertAdjacentElement	1326167.2 Ops/sec

Related benchmarks:

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement22 (version: 0)

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

Comparing performance of: 1) innerHTML += vs 2) insertAdjacentHTML vs 3) appendChild vs 4) insertAdjacentElement

Created: 10 months ago by: Guest

Jump to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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