Benchmark: innerHTML vs insertAdjacentHTML vs append vs insertAdjacentElement

Tests:

1) innerHTML +=
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.innerHTML += box2HTML;
2) insertAdjacentHTML
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.insertAdjacentHTML('beforeend', box1.outerHTML); box3.insertAdjacentHTML('beforeend', box2.outerHTML);
3) append
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.append(box1, box2);
4) insertAdjacentElement
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.insertAdjacentElement('beforeend', box1); box3.insertAdjacentElement('beforeend', box2);
appendChild
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.appendChild(box1); box3.appendChild(box2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1) innerHTML +=
2) insertAdjacentHTML
3) append
4) insertAdjacentElement
appendChild

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark.

**Benchmark Definition**

The benchmark is designed to compare four different methods for inserting HTML content into an element:

1. `innerHTML`
2. `insertAdjacentHTML`
3. `append`
4. `insertAdjacentElement`

These methods are used to insert or append HTML elements to a DOM document, and their performance can vary depending on the browser, device, and operating system.

**Options Compared**

Each test case compares two different methods:

* `innerHTML +` vs `insertAdjacentHTML`
* `append` vs `insertAdjacentElement`

The benchmark measures the execution time for each method, allowing users to compare their performance.

**Pros and Cons of Each Approach**

Here's a brief overview of each approach:

1. **innerHTML**: This method sets the HTML content directly on the element using the `innerHTML` property. It can be slow because it involves parsing the HTML and updating the element's DOM tree.
2. **insertAdjacentHTML**: This method uses the `insertAdjacentHTML` method, which is a more modern approach that allows for efficient insertion of HTML content into the DOM. It's faster than `innerHTML` but still requires parsing the HTML.
3. **append**: This method uses the `appendChild` method to add a new element to the end of the DOM document. While it's generally faster than `innerHTML`, it can be slower than `insertAdjacentHTML` if the child element is complex or contains many attributes.
4. **insertAdjacentElement**: Similar to `append`, this method uses the `insertAdjacentElement` method, which is more efficient when working with a single element. However, it's not as widely supported as `appendChild`.

**Library and Purpose**

In some test cases, the benchmark uses the `outerHTML` property of elements, which returns the HTML content of an element as a string.

The `outerHTML` property is useful for creating a copy of an element's HTML content without modifying its DOM tree. However, it can be slow because it involves parsing the HTML and generating a new string representation.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax that would require additional explanation.

**Other Alternatives**

If you're interested in exploring other alternatives, here are some additional methods you could consider:

* `createElement` + `appendChild`: This approach involves creating a new element using the `createElement` method and then appending it to the DOM document.
* `innerHTML` with attribute manipulation: Some browsers support manipulating HTML attributes directly on an element's `innerHTML`. However, this is not widely supported and can be slow due to the parsing requirements.

Keep in mind that these alternatives may not provide a significant performance difference from the methods being compared in the benchmark.

Related benchmarks:

innerHTML vs insertAdjacentHTML vs append vs insertAdjacentElement (version: 0)

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

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

Created: 3 years ago by: Guest

Jump to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) append

4) insertAdjacentElement

appendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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