Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2

Script Preparation code:

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

Tests:

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark on MeasureThat.net compares the performance of four methods for inserting HTML content into an existing HTML element:

**Methods being compared:**

1. **`innerHTML`**: This method sets the entire contents of an element to new HTML code.  It's simple but can be slow, especially with large amounts of content, as it re-renders the entire element.
2. **`insertAdjacentHTML()`**: This method inserts new HTML *at a specific location* within an existing element (beforebegin, afterbegin, beforeend, afterend). It's generally faster than `innerHTML` because it only updates the specified portion of the DOM.
3. **`appendChild()`**:  This method adds a new node (which can be an element or other content) as the last child of an existing element.

4. **`insertAdjacentElement()`**: This method inserts an existing element at a specific location within another element, similar to `insertAdjacentHTML()`.

**Pros and Cons:**

* **`innerHTML`**:
    * **Pros**: Simple syntax. Works for replacing entire content.
    * **Cons**: Slow due to full DOM re-render. Can be inefficient for large amounts of content.
* **`insertAdjacentHTML()`**: 
    * **Pros**:  Faster than `innerHTML`, targeted insertion avoids unnecessary re-rendering.
    * **Cons**: Slightly more complex syntax than `appendChild()`.
* **`appendChild()`**:
    * **Pros**: Efficient for adding a single element as the last child. Simple syntax.
    * **Cons**: Only adds to the end of the existing element's content.
* **`insertAdjacentElement()`**: 
    * **Pros**: Similar performance benefits to `insertAdjacentHTML()`.  More explicit than using `innerHTML` when working with pre-existing elements.
    * **Cons**:  Slightly more complex syntax compared to `appendChild()`.

**Considerations:**

* **Content size**: For small amounts of content, the performance difference might be negligible. 
* **DOM structure**: If you need to insert content at a specific location within an element, use `insertAdjacentHTML()` or `insertAdjacentElement()`. 
* **Complexity**:  `innerHTML` is simplest but least efficient.

**Alternatives:**

While these methods are common in JavaScript, there are other ways to manipulate the DOM that might be more efficient depending on your use case:

* **Using a Virtual DOM library**: Libraries like React or Vue.js create a virtual representation of the DOM and update only the necessary parts when changes occur. This can significantly improve performance for complex applications.

Latest run results:

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

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

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
2) insertAdjacentHTML	136518.9 Ops/sec
3) appendChild	573261.4 Ops/sec
4) insertAdjacentElement	550334.2 Ops/sec

Related benchmarks:

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2 (version: 0)

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2

Comparing performance of: 2) insertAdjacentHTML vs 3) appendChild vs 4) insertAdjacentElement

Created: one year ago by: Guest

Jump to the latest result

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):