Benchmark: insertAdjacentHTML vs appendChild

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild
insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Definition**

The benchmark is comparing two approaches to insert or append HTML elements to a page: `insertAdjacentHTML` and `appendChild`.

**Options Being Compared**

There are two main options:

1. **Inserting HTML using `insertAdjacentHTML`**: This method allows you to specify where in the DOM to insert the new HTML, allowing for more precise control over the insertion point.
2. **Appending HTML using `appendChild`**: This method appends a single element to the end of an existing element.

**Pros and Cons**

* **InsertAdjacentHTML**:
	+ Pros: More flexible and controlled way of inserting HTML, can be used to insert multiple elements at once, and reduces DOM manipulation.
	+ Cons: Can be slower than `appendChild` for large amounts of data, as it requires parsing the HTML string.
* **AppendChild**:
	+ Pros: Faster and more lightweight, as it only appends a single element at a time.
	+ Cons: Less controlled and less flexible, can lead to DOM manipulation issues if not used correctly.

**Library Used**

None are explicitly mentioned in the benchmark definition. However, both `insertAdjacentHTML` and `appendChild` are part of the DOM API (Document Object Model), which is a standard JavaScript library.

**Special JS Feature or Syntax**

There isn't any special feature or syntax being tested in this benchmark. It's focused on comparing two specific methods for inserting HTML into the DOM.

**Other Alternatives**

For inserting HTML, there are other methods available:

* `innerHTML` and `outerHTML`: These properties allow you to set the inner or outer HTML of an element, but be aware that they can lead to security issues if not used carefully.
* `createDocumentFragment()`: This method creates a new document fragment that can be inserted into the DOM, reducing unnecessary reflows.

However, these alternatives are generally less controlled and more prone to errors than using `insertAdjacentHTML` or `appendChild`.

**Benchmark Preparation Code**

The preparation code is quite simple:

```javascript
"<div id=\"test\"></div>"
```

This creates a single `<div>` element with an ID of "test", which will be used as the target for inserting HTML.

**Individual Test Cases**

There are two test cases:

1. **`appendChild`**: This test case creates 1000 elements, each with a `classList.add("testClass")`, and appends them to a new element (`newElement`). Then, it inserts the new element into the DOM using `document.getElementById("test").appendChild(newElement)`.
2. **`insertAdjacentHTML`**: This test case creates an HTML string with 1000 elements, each with a `classList.add("testClass")`, and inserts them at the end of the existing `<div>` element (`#test`) using `document.getElementById("test").insertAdjacentHTML("beforeend", html)`.

The benchmark then measures the execution time for each test case.

Related benchmarks:

insertAdjacentHTML vs appendChild (version: 0)

Comparing performance of: appendChild vs insertAdjacentHTML

Created: 3 years ago by: Guest

Jump to the latest result

appendChild

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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