Benchmark: appendChild vs append 2

HTML Preparation code:

<div id="A"></div>
<p id="B">1234</p>

Tests:

appendChild 1
A.appendChild(B);
append 1
A.append(B);
appendChild 2
const C = document.querySelector("#A"); const D = document.querySelector("#B"); C.appendChild(D);
append 2
const C = document.querySelector("#A"); const D = document.querySelector("#B"); C.append(D);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild 1
append 1
appendChild 2
append 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
appendChild 1	165610.6 Ops/sec
append 1	156707.1 Ops/sec
appendChild 2	260280.1 Ops/sec
append 2	244562.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The test case provided measures the performance difference between using `appendChild` and `append` methods to add elements to a DOM node.

Let's break down each individual test case:

**Test Case 1: "appendChild 1"**

This test case uses the following JavaScript code:
```javascript
A.appendChild(B);
```
Here, `A` and `B` are HTML elements retrieved using `document.querySelector`. The method being tested is `appendChild`, which appends a child element to an existing element.

**Pros of using `appendChild`:**

*   Allows for more control over the DOM structure, as it enables the addition of arbitrary number of child elements.
*   Is generally faster than the alternative approach.

**Cons of using `appendChild`:**

*   Can be slower in some cases because it requires creating a new DOM node for each child element.
*   May lead to unnecessary DOM nodes being created if not used carefully.

**Test Case 2: "append 1"**

This test case uses the following JavaScript code:
```javascript
A.append(B);
```
Here, `A` and `B` are HTML elements retrieved using `document.querySelector`. The method being tested is `append`, which appends one or more child nodes to an existing element.

**Pros of using `append`:**

*   Generally faster than `appendChild`, as it only creates a single DOM node.
*   Can be useful when you need to add multiple child elements at once.

**Cons of using `append`:**

*   Only allows adding one or more child elements, which can limit its flexibility.
*   May lead to unnecessary DOM nodes being created if not used carefully.

**Test Case 3: "appendChild 2"**

This test case uses the following JavaScript code:
```javascript
const C = document.querySelector("#A");
const D = document.querySelector("#B");
C.appendChild(D);
```
Here, `C` and `D` are HTML elements retrieved using `document.querySelector`. The method being tested is still `appendChild`, but with a slight twist: it's called on the first element (`C`) instead of passing it as an argument.

**Pros of using `appendChild` on an existing element:**

*   Can be faster than calling `appendChild` with the element as an argument.
*   Reduces overhead by not having to create a new DOM node.

**Cons of using `appendChild` on an existing element:**

*   Limited control over the DOM structure, as it only adds one child element.
*   May lead to unnecessary DOM nodes being created if not used carefully.

**Test Case 4: "append 2"**

This test case uses the following JavaScript code:
```javascript
const C = document.querySelector("#A");
const D = document.querySelector("#B");
C.append(D);
```
Here, `C` and `D` are HTML elements retrieved using `document.querySelector`. The method being tested is still `append`, but with a slight twist: it's called on the first element (`C`) instead of passing it as an argument.

**Pros of using `append` on an existing element:**

*   Can be faster than calling `append` with the element as an argument.
*   Reduces overhead by not having to create a new DOM node.

**Cons of using `append` on an existing element:**

*   Limited control over the DOM structure, as it only adds one child element.
*   May lead to unnecessary DOM nodes being created if not used carefully.

The alternative approach is to use native JavaScript methods like `insertAdjacentHTML()` or `DOMParser.parseFromString()`, but these are less common and less tested in this specific benchmark.

**Conclusion**

In summary, the choice between `appendChild` and `append` depends on the specific requirements of your project. If you need more control over the DOM structure and don't mind creating multiple DOM nodes, `appendChild` might be a better choice. However, if speed is crucial and you only need to add one or more child elements at once, `append` might be a better option.

The use of native JavaScript methods like `insertAdjacentHTML()` or `DOMParser.parseFromString()` can provide even faster performance in some cases, but these are less common and less tested.

Related benchmarks:

appendChild vs append 2 (version: 0)

Comparing performance of: appendChild 1 vs append 1 vs appendChild 2 vs append 2

Created: 11 months ago by: Guest

Jump to the latest result

appendChild 1

append 1

appendChild 2

append 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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