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

Test name	Executions per second
1) innerHTML +=	9288739.0 Ops/sec
2) insertAdjacentHTML	1078376.0 Ops/sec
3) appendChild	1514264.9 Ops/sec
4) insertAdjacentElement	1393279.0 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.

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

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