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

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: 9 hours ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
1) innerHTML +=	13862086.0 Ops/sec
2) insertAdjacentHTML	5080682.5 Ops/sec
3) appendChild	8044125.0 Ops/sec
4) insertAdjacentElement	7108498.5 Ops/sec

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

Related benchmarks:

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: 3 years ago by: Registered User

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