Benchmark: insertAdjacentHtml vs innerHTML (no initial contents)

Script Preparation code:

const targetElem = document.createElement( 'DIV' );
targetElem.id = 'target';
document.body.appendChild( targetElem );

Tests:

innerHTML
document.getElementById( 'target' ).innerHTML = ` <div> <span>Child 4</span> </div> `;
insertAdjacentHTML
document.getElementById( 'target' ).insertAdjacentHTML( 'beforeend', ` <div> <span>Child 4</span> </div> ` );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0

Browser/OS: Firefox 129 on Windows

View result in a separate tab

insertAdjacentHTML

278K/s

innerHTML

221K/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentHTML	278,060 Ops/sec
innerHTML	220,833 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and explain what is being tested.

**Benchmark Definition**

The provided JSON represents a benchmark test that compares two JavaScript methods for inserting HTML content into an element: `insertAdjacentHTML` and `innerHTML`. The benchmark defines two test cases:

1. **insertAdjacentHTML**: This method inserts the specified HTML string at the end of the target element, without modifying its existing contents.
2. **innerHTML**: This method sets the inner HTML content of the target element to the specified HTML string.

**Options Compared**

The benchmark compares these two options because they serve different purposes and have different performance characteristics:

* `insertAdjacentHTML` is a more modern and efficient way to insert HTML content, as it avoids the need to parse the existing HTML contents of the element.
* `innerHTML`, on the other hand, parses the entire HTML content of the element and sets it as the inner HTML, which can be slower and less memory-efficient.

**Pros and Cons**

Here are some pros and cons of each approach:

**insertAdjacentHTML**

Pros:

* More efficient than `innerHTML` since it avoids parsing the existing HTML contents.
* Better support for HTML documents with multiple root elements (e.g., frames).

Cons:

* Not supported in older browsers that don't implement this feature.
* May be slower for small amounts of data due to the need for a DOM node insertion.

**innerHTML**

Pros:

* Well-supported across most browsers, including older ones.
* Can be faster for small amounts of data since it only needs to parse the text content.

Cons:

* Parsed HTML contents can be larger than needed, leading to slower performance and higher memory usage.
* May not work correctly with HTML documents that have multiple root elements (e.g., frames).

**Library Usage**

There is no explicit library mentioned in the benchmark definition. However, it's worth noting that `insertAdjacentHTML` was introduced as a part of the Web API in modern browsers, while `innerHTML` has been around since the early days of HTML.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes used in this benchmark.

**Other Alternatives**

If you're looking for alternative methods to insert HTML content, here are a few options:

* Using the `createTextNode()` method and appending it to the element's child list.
* Using a text editor library like DOMPurify to sanitize and parse the HTML string.
* Using a DOM manipulation library like jQuery to simplify the process.

Keep in mind that each of these alternatives has its own trade-offs in terms of performance, memory usage, and browser support.

insertAdjacentHtml vs innerHTML (no initial contents) (version: 0)

insertAdjacentHtml vs innerHTML (no initial contents)

Comparing performance of: `innerHTML vs insertAdjacentHTML`

Created: one year ago by: Guest

Go to the latest result

innerHTML

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

insertAdjacentHtml vs innerHTML (no initial contents) (version: 0)

insertAdjacentHtml vs innerHTML (no initial contents)

Comparing performance of: innerHTML vs insertAdjacentHTML

Created: one year ago by: Guest

Go to the latest result

innerHTML

insertAdjacentHTML

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: `innerHTML vs insertAdjacentHTML`