Benchmark: innerHTML vs append

HTML Preparation code:

<div id="test"></div>

Tests:

append
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement);
innerHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").innerHTML = html;

Historical Performance Data aggregated from 69 community runs

Desktop Results:

Chrome 47 runs

innerHTML

1K/s

append

730/s

Fastest: innerHTML (1.6x faster)

View exact numbers

✓ innerHTML: 1,202 ops/sec
• append: 730 ops/sec

Firefox 16 runs

innerHTML

2K/s

append

865/s

Fastest: innerHTML (2.6x faster)

View exact numbers

✓ innerHTML: 2,206 ops/sec
• append: 865 ops/sec

Mobile Results:

Chrome 6 runs

innerHTML

653/s

append

228/s

Fastest: innerHTML (2.9x faster)

View exact numbers

✓ innerHTML: 653 ops/sec
• append: 228 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
append
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 7

View result in a separate tab

innerHTML

940/s

append

326/s

View exact numbers

Test name	Executions per second
✓ innerHTML	940 Ops/sec
append	326 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 provided benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Definition**

The benchmark defines two test cases:

1. `innerHTML`: This test case creates an HTML string with 1000 elements inside a single `<div>` element, and then appends this string to another `<div>` element using `innerHTML`.
2. `append`: This test case creates a new element (`<div>`) and appends 1000 child elements to it using the `append()` method.

**Options Compared**

The benchmark is comparing two approaches:

1. **innerHTML**: Appending HTML strings to an element's innerHTML.
2. **append()**: Using the native JavaScript method to append elements to another element.

**Pros and Cons**

### innerHTML

Pros:

* Easier to write, as it only requires creating the HTML string.
* Often faster, as it bypasses the DOM manipulation process.

Cons:

* Less efficient than `append()` in terms of memory allocation and garbage collection.
* Can be slower due to DOM parsing and manipulation.
* Limited control over the elements' behavior (e.g., no ability to add event listeners).

### append()

Pros:

* More efficient, as it doesn't require additional memory allocations or garbage collection.
* Provides more control over the elements' behavior (e.g., adding event listeners).
* Can be faster due to native DOM manipulation.

Cons:

* Requires more code and setup, especially for large datasets.
* May have compatibility issues across different browsers.

**Other Considerations**

* **Browser Support**: Both approaches are supported by most modern browsers. However, some older browsers might exhibit differences in performance or behavior.
* **DOM Manipulation**: `append()` allows for more precise control over the DOM tree, making it suitable for complex layouts and animations.
* **Memory Allocation**: `innerHTML` can lead to increased memory allocation due to the creation of intermediate HTML elements.

**Library Usage**

There is no library used in this benchmark. The tests only utilize built-in JavaScript methods and the Document Object Model (DOM).

**Special JS Features or Syntax**

None mentioned in this benchmark.

**Alternatives**

Other alternatives for appending elements include:

1. `insertAdjacentHTML()`: Similar to `innerHTML`, but allows for more flexibility in terms of inserting HTML at specific positions.
2. `appendChild()`: Appends a single element to another element, rather than multiple elements.
3. **Template Engines**: Some libraries (e.g., Handlebars) use template engines to render and append complex templates.

Keep in mind that the choice of approach depends on the specific requirements and constraints of your project, as well as personal preference and familiarity with JavaScript APIs.

innerHTML vs append (version: 0) Benchmark.js

Comparing performance of: `append vs innerHTML`

Created: 5 years ago by: Guest

Go to the latest result

append

innerHTML

Historical Performance Data aggregated from 69 community runs

Desktop Results:

Chrome 47 runs

Firefox 16 runs

Mobile Results:

Chrome 6 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 append (version: 0) Benchmark.js

Comparing performance of: append vs innerHTML

Created: 5 years ago by: Guest

Go to the latest result

append

innerHTML

Historical Performance Data aggregated from 69 community runs

Desktop Results:

Chrome 47 runs

Firefox 16 runs

Mobile Results:

Chrome 6 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: `append vs innerHTML`