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

Historical Performance Data aggregated from 29 community runs

Desktop Results:

Chrome 22 runs

insertAdjacentHTML

91K/s

innerHTML

89K/s

appendChild

55K/s

insertAdjacentElement

53K/s

append

51K/s

Fastest: insertAdjacentHTML (1.8x faster)

View exact numbers

✓ insertAdjacentHTML: 91,150 ops/sec
• innerHTML: 88,544 ops/sec
• appendChild: 55,472 ops/sec
• insertAdjacentElement: 53,161 ops/sec
• append: 50,572 ops/sec

Firefox 7 runs

innerHTML

92K/s

insertAdjacentHTML

75K/s

insertAdjacentElement

48K/s

appendChild

44K/s

append

38K/s

Fastest: innerHTML (2.4x faster)

View exact numbers

✓ innerHTML: 91,933 ops/sec
• insertAdjacentHTML: 75,031 ops/sec
• insertAdjacentElement: 48,109 ops/sec
• appendChild: 44,087 ops/sec
• append: 37,795 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 5 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Linux

View result in a separate tab

insertAdjacentHTML

191K/s

innerHTML

189K/s

appendChild

139K/s

insertAdjacentElement

132K/s

append

127K/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentHTML	191,158 Ops/sec
innerHTML	188,922 Ops/sec
appendChild	138,757 Ops/sec
insertAdjacentElement	132,469 Ops/sec
append	126,619 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 3 years ago by: Registered User

Go to the latest result

innerHTML

insertAdjacentHTML

appendChild

append

insertAdjacentElement

Historical Performance Data aggregated from 29 community runs

Desktop Results:

Chrome 22 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 3 years ago by: Registered User

Go to the latest result

innerHTML

insertAdjacentHTML

appendChild

append

insertAdjacentElement

Historical Performance Data aggregated from 29 community runs

Desktop Results:

Chrome 22 runs

Firefox 7 runs

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 vs appendChild vs append vs insertAdjacentElement`