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;

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 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/29.0 Chrome/136.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 136 on Android

View result in a separate tab

Test name	Executions per second
append	260.7 Ops/sec
innerHTML	679.4 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.

Related benchmarks:

innerHTML vs append (version: 0)

Comparing performance of: append vs innerHTML

Created: 4 years ago by: Guest

Jump to the latest result

append

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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