Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2025

HTML Preparation code:

<section>
  <div>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</section>

Script Preparation code:

 let div = document.querySelector("div");

Tests:

1) innerHTML
div.innerHTML = 'Paragraph of textParagraph of textParagraph of textParagraph of textParagraph of text';
2) insertAdjacentHTML
div.replaceChildren(); div.insertAdjacentHTML('beforeend', 'Paragraph of textParagraph of textParagraph of textParagraph of textParagraph of text');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1) innerHTML
2) insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Linux

View result in a separate tab

1) innerHTML

265K/s

2) insertAdjacentHTML

199K/s

View exact numbers

Test name	Executions per second
✓ 1) innerHTML	264,612 Ops/sec
2) insertAdjacentHTML	199,352 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark you provided compares four different methods for updating the HTML content of a `<div>` element in the browser’s DOM. The methods being tested are:

1. **innerHTML**
2. **insertAdjacentHTML**
3. **appendChild**
4. **insertAdjacentElement**

However, only two methods have been defined with test cases in the data:

1. **innerHTML**: 
 - **Benchmark Definition**: `div.innerHTML = 'Paragraph of textParagraph of textParagraph of textParagraph of textParagraph of text';`
 - **Test Name**: "1) innerHTML"

2. **insertAdjacentHTML**: 
 - **Benchmark Definition**: 
 ```javascript
 div.replaceChildren();
 div.insertAdjacentHTML('beforeend', 'Paragraph of textParagraph of textParagraph of textParagraph of textParagraph of text');
 ```
 - **Test Name**: "2) insertAdjacentHTML"

### Method Descriptions

#### 1. innerHTML
- **Function**: Directly sets or returns the HTML content contained within an element. When you use `innerHTML` to assign a new string, it parses the string and replaces the existing content.
- **Pros**:
  - Simple and straightforward to use.
  - Can set complete inner markup in one go.
- **Cons**:
  - Parsing and re-rendering can be inefficient, especially if the existing content is large since it may remove and recreate all child elements.
  - This approach can lead to security vulnerabilities such as XSS (Cross-Site Scripting) if input is not sanitized, as it directly modifies the DOM.

#### 2. insertAdjacentHTML
- **Function**: Inserts HTML text at a specified position relative to the targeted element, without disrupting existing nodes.
- **Pros**:
  - More efficient than `innerHTML` because it can insert new HTML without needing to remove existing elements.
  - Allows for more control over where to place the new content (e.g., before, after, etc.).
- **Cons**:
  - Slightly more complex syntax compared to simply using `innerHTML`.

### Performance Results
The benchmark results indicate that:
- `innerHTML` has an execution rate of **307058.75 executions per second**.
- `insertAdjacentHTML` has an execution rate of **274129.09375 executions per second**.

From a performance perspective, `innerHTML` was slightly faster in this specific benchmark.

### Other Considerations

- **appendChild** and **insertAdjacentElement** are mentioned in the title but not explicitly tested in this case. 
  - `appendChild`: Appends a new child node to the end of the list of children for a specified parent node. 
  - **insertAdjacentElement** works similarly to `insertAdjacentHTML` but inserts an actual DOM element rather than HTML markup.

### Alternatives

Other common alternatives for updating the DOM include:
- **Document Fragment**: Useful for batch operations, allowing modifications off-screen and appending in one operation.
- **jQuery methods**: For projects using jQuery, methods like `.append()`, `.html()`, and others provide a wrapper around the raw DOM manipulations, abstracting some of the complexities.
- **React or other Frameworks**: In modern app developments, frameworks like React handle updates to the DOM effectively through their virtual DOM technologies, optimizing performance internally.

In conclusion, each of these methods has its use cases and trade-offs, depending on the requirements of the application and the specific scenario when managing DOM manipulations.

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

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

Comparing performance of: `1) innerHTML vs 2) insertAdjacentHTML`

Created: one year ago by: Guest

Go to the latest result

1) innerHTML

2) insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

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

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

Comparing performance of: 1) innerHTML vs 2) insertAdjacentHTML

Created: one year ago by: Guest

Go to the latest result

1) innerHTML

2) insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `1) innerHTML vs 2) insertAdjacentHTML`