Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

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(box2);
4) insertAdjacentElement
box1.insertAdjacentElement('beforeend', box2);

Historical Performance Data aggregated from 146 community runs

Desktop Results:

Chrome 96 runs

1) innerHTML +=

3.6M/s

3) appendChild

2.3M/s

4) insertAdjacentElement

2.2M/s

2) insertAdjacentHTML

2.0M/s

Fastest: 1) innerHTML += (1.8x faster)

View exact numbers

✓ 1) innerHTML +=: 3,586,112 ops/sec
• 3) appendChild: 2,278,743 ops/sec
• 4) insertAdjacentElement: 2,151,551 ops/sec
• 2) insertAdjacentHTML: 2,013,911 ops/sec

Firefox 35 runs

1) innerHTML +=

14.6M/s

3) appendChild

7.3M/s

4) insertAdjacentElement

6.1M/s

2) insertAdjacentHTML

1.8M/s

Fastest: 1) innerHTML += (8.3x faster)

View exact numbers

✓ 1) innerHTML +=: 14,608,543 ops/sec
• 3) appendChild: 7,255,382 ops/sec
• 4) insertAdjacentElement: 6,064,076 ops/sec
• 2) insertAdjacentHTML: 1,770,671 ops/sec

Mobile Results:

Chrome 10 runs

1) innerHTML +=

2.2M/s

3) appendChild

1.2M/s

4) insertAdjacentElement

1.1M/s

2) insertAdjacentHTML

1.1M/s

Fastest: 1) innerHTML += (2.1x faster)

View exact numbers

✓ 1) innerHTML +=: 2,226,854 ops/sec
• 3) appendChild: 1,164,934 ops/sec
• 4) insertAdjacentElement: 1,078,204 ops/sec
• 2) insertAdjacentHTML: 1,062,052 ops/sec

Safari 5 runs

1) innerHTML +=

15.9M/s

3) appendChild

5.6M/s

4) insertAdjacentElement

4.5M/s

2) insertAdjacentHTML

1.7M/s

Fastest: 1) innerHTML += (9.2x faster)

View exact numbers

✓ 1) innerHTML +=: 15,881,994 ops/sec
• 3) appendChild: 5,580,372 ops/sec
• 4) insertAdjacentElement: 4,497,646 ops/sec
• 2) insertAdjacentHTML: 1,720,231 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
1) innerHTML +=
2) insertAdjacentHTML
3) appendChild
4) insertAdjacentElement

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Mac OS X 10.15

View result in a separate tab

1) innerHTML +=

25.5M/s

3) appendChild

15.2M/s

4) insertAdjacentElement

12.7M/s

2) insertAdjacentHTML

3.6M/s

View exact numbers

Test name	Executions per second
✓ 1) innerHTML +=	25,478,686 Ops/sec
3) appendChild	15,209,899 Ops/sec
4) insertAdjacentElement	12,665,473 Ops/sec
2) insertAdjacentHTML	3,577,259 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON benchmark measures the performance of different methods for inserting HTML content into an HTML element:

1. `innerHTML`: setting the inner HTML of an element
2. `insertAdjacentHTML`: using the `insertAdjacentHTML` method to insert HTML content before, after, or inside another element
3. `appendChild`: appending a child node (in this case, a `div` element) to another element
4. `insertAdjacentElement`: using the `insertAdjacentElement` method to insert an element before, after, or inside another element

**Options compared**

The benchmark compares the performance of these four options:

* `innerHTML +=`: concatenating HTML strings using the `+` operator
* `insertAdjacentHTML`: using the `insertAdjacentHTML` method with the `'beforeend'` argument (inserting content before the current element)
* `appendChild`: appending a child node to another element
* `insertAdjacentElement`: using the `insertAdjacentElement` method with the `'beforeend'` argument (inserting an element before the current element)

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **innerHTML**: Pros:
	* Simple to use
	* Works well for small amounts of HTML content
Cons:
	* Can be slow for large amounts of content, as it involves creating a new DOM tree and copying all child nodes.
	* May not work well with HTML entities or other special characters.
2. **insertAdjacentHTML**: Pros:
	* Fast and efficient, especially when using the `'beforeend'` argument
	* Works well with HTML entities and special characters
Cons:
	* Requires a DOM element to insert content into (it can't be used directly on a string)
3. **appendChild**: Pros:
	* Works well for large amounts of content, as it only involves appending a single child node.
Cons:
	* Can be slower than `insertAdjacentHTML` when using the `'beforeend'` argument.
4. **insertAdjacentElement**: Similar to `insertAdjacentHTML`, but uses an element instead of HTML content.

**Library usage**

None of the benchmark tests use any external libraries, as all methods are native to JavaScript.

**Special JS features or syntax**

The benchmark doesn't use any special JavaScript features or syntax beyond what's available in modern browsers. If you're using a specific browser or version that supports newer features, you may see differences in performance.

**Other alternatives**

There are other alternatives for inserting HTML content into an element, such as:

* Using the `textContent` property to set text content
* Creating a new `div` element and appending it to another element using `appendChild`
* Using a template engine like Handlebars or Mustache

However, these approaches may have different performance characteristics and use cases compared to the methods tested in this benchmark.

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement (version: 1)

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

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

Created: 4 years ago by: Registered User

Go to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

Historical Performance Data aggregated from 146 community runs

Desktop Results:

Chrome 96 runs

Firefox 35 runs

Mobile Results:

Chrome 10 runs

Safari 5 runs

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 insertAdjacentElement (version: 1)

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

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

Created: 4 years ago by: Registered User

Go to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

Historical Performance Data aggregated from 146 community runs

Desktop Results:

Chrome 96 runs

Firefox 35 runs

Mobile Results:

Chrome 10 runs

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