Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs append vs insertAdjacentElement

Script Preparation code:

// Change this number to see how well they scale
repeat = 10;

Tests:

innerHTML
const box = document.createElement('div'); let html = ''; for (let i = 0; i < repeat; i++) html += '<div class="a b"><div>Test</div></div>'; box.innerHTML += html;
insertAdjacentHTML
const box = document.createElement('div'); let html = ''; for (let i = 0; i < repeat; i++) html += '<div class="a b"><div>Test</div></div>'; box.insertAdjacentHTML('beforeend', html);
appendChild
const box = document.createElement('div'); const els = []; for (let i = 0; i < repeat; i++) { const div2 = document.createElement('div'); div2.innerText = 'Test'; const div1 = document.createElement('div'); div1.className = 'a b'; div1.appendChild(div2); els.push(div1); } els.forEach(el => box.appendChild(el));
append
const box = document.createElement('div'); const els = []; for (let i = 0; i < repeat; i++) { const div2 = document.createElement('div'); div2.innerText = 'Test'; const div1 = document.createElement('div'); div1.className = 'a b'; div1.append(div2); els.push(div1); } box.append(...els);
insertAdjacentElement
const box = document.createElement('div'); const els = []; for (let i = 0; i < repeat; i++) { const div2 = document.createElement('div'); div2.innerText = 'Test'; const div1 = document.createElement('div'); div1.className = 'a b'; div1.insertAdjacentElement('beforeend', div2); els.push(div1); } els.forEach(el => box.insertAdjacentElement('beforeend', el));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
insertAdjacentHTML
appendChild
append
insertAdjacentElement

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	260500.4 Ops/sec
insertAdjacentHTML	272169.6 Ops/sec
appendChild	200756.6 Ops/sec
append	155736.8 Ops/sec
insertAdjacentElement	194137.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition**

The benchmark is to compare the performance of four DOM manipulation methods: `innerHTML`, `insertAdjacentHTML`, `appendChild`, and `append`. The goal is to measure which method is the fastest for appending or inserting HTML content into a `div` element.

**Test Cases**

Each test case represents one of the four DOM manipulation methods. Here's what each test case does:

1. Creates an empty `div` element (`box`) using `document.createElement('div')`.
2. Loops `repeat` times, creating multiple `div` elements with some content (e.g., `<div class="a b">Test</div>`).
3. Appends or inserts the created HTML content into the main `box` element using one of the four DOM manipulation methods.

**Options Compared**

The four options being compared are:

1. **innerHTML**: sets the inner HTML of an element, which involves creating a temporary string and inserting it into the element.
2. **insertAdjacentHTML**: inserts HTML content into an element at a specific position (e.g., `beforeend`).
3. **appendChild**: appends one or more child elements to another element.
4. **append**: is deprecated and not commonly used, but included for completeness.

**Pros and Cons**

Here are some pros and cons of each method:

* `innerHTML`:
	+ Pros: simple, efficient, works well with most use cases.
	+ Cons: can be slow for large amounts of content, creates a temporary string.
* `insertAdjacentHTML`:
	+ Pros: fast, efficient, allows precise control over insertion position.
	+ Cons: requires HTML parsing, may incur overhead for invalid HTML.
* `appendChild` and `append`:
	+ Pros: flexible, allows dynamic appending of elements.
	+ Cons: can be slower than `innerHTML` or `insertAdjacentHTML`, requires more memory allocation.

**Library and Syntax**

None of the test cases use a specific library. However, `insertAdjacentHTML` relies on the HTML parsing engine to validate the inserted HTML content.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax used in these test cases beyond standard ECMAScript 2020.

**Other Alternatives**

Some alternative DOM manipulation methods that could be included in a benchmark are:

* `slice()` and `splice()`: for appending elements using arrays.
* `innerHTML` with `createDocumentFragment()`: for inserting HTML content into an element without creating a temporary string.
* `insertAdjacentText()`: for inserting plain text content into an element.

Keep in mind that the specific alternatives would depend on the goals of the benchmark and the requirements of the use case being tested.

Related benchmarks:

innerHTML vs insertAdjacentHTML vs appendChild vs append vs insertAdjacentElement (version: 19)

innerHTML vs insertAdjacentHTML vs appendChild vs append vs insertAdjacentElement

Comparing performance of: innerHTML vs insertAdjacentHTML vs appendChild vs append vs insertAdjacentElement

Created: 2 years ago by: Registered User

Jump to the latest result

innerHTML

insertAdjacentHTML

appendChild

append

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