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

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

1) innerHTML +=

9.3M/s

3) appendChild

1.5M/s

4) insertAdjacentElement

1.4M/s

2) insertAdjacentHTML

1.1M/s

View exact numbers

Test name	Executions per second
✓ 1) innerHTML +=	9,288,739 Ops/sec
3) appendChild	1,514,265 Ops/sec
4) insertAdjacentElement	1,393,279 Ops/sec
2) insertAdjacentHTML	1,078,376 Ops/sec

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

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: 2 years ago by: Guest

Go to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 2 years ago by: Guest

Go to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

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: `1) innerHTML += vs 2) insertAdjacentHTML vs 3) appendChild vs 4) insertAdjacentElement`