Benchmark: JavaScript: append() VS appendChild()

HTML Preparation code:

<body></body>

Tests:

With append()
const p = document.createElement("p"); document.body.append(p);
With appendChild()
const p = document.createElement("p"); document.body.appendChild(p);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With append()
With appendChild()

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**What is tested?**

The benchmark measures the performance difference between two JavaScript methods: `append()` and `appendChild()`. Both methods are used to add an HTML element (in this case, a paragraph tag) to the body of a web page.

**Options being compared**

There are two options being compared:

1. **`append()`**: This method adds the element directly to the end of the body's content.
2. **`appendChild()`**: This method adds the element as the last child of the body's content.

**Pros and cons of each approach:**

* `append()`: This method is generally faster because it uses a single DOM mutation operation, which can be optimized by the browser's JavaScript engine. However, it may not provide the same level of flexibility as `appendChild()` since it adds elements to the end of the content without any intermediate nodes.
* `appendChild()`**: This method provides more control over the structure of the HTML document, allowing for the creation of more complex layouts and hierarchies. However, it requires two DOM mutation operations: adding an element and then setting its position in the existing node tree. This can lead to slightly slower performance compared to using `append()`.

**Library used**

In this benchmark, no specific library is mentioned. The benchmark uses only native JavaScript methods for creating and manipulating HTML elements.

**Special JS feature/syntax**

There are no special JavaScript features or syntaxes mentioned in the benchmark that would require additional explanation.

**Other alternatives**

While not explicitly mentioned in the benchmark definition, other alternatives for adding elements to the DOM include:

* Using `insertAdjacentHTML()` (introduced in ECMAScript 2015) which is similar to `appendChild()`, but allows inserting HTML snippets at specific positions relative to an existing element.
* Using a library like jQuery (which uses its own implementation of `append()` and `appendChild()`) for DOM manipulation, although this would require additional setup and configuration.

**Benchmark preparation code**

The benchmark script preparation code includes:

```javascript
const p = document.createElement("p");
document.body.append(p);
```

This creates a new paragraph element (`p`) and appends it to the body of the HTML document using the `append()` method.

Similarly, for the second test case:

```javascript
const p = document.createElement("p");
document.body.appendChild(p);
```

This also creates a new paragraph element and appends it to the body of the HTML document, but uses the `appendChild()` method instead.

Latest run results:

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

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

Browser/OS: Firefox 116 on Windows

View result in a separate tab

Test name	Executions per second
With append()	615715.9 Ops/sec
With appendChild()	582754.2 Ops/sec

Related benchmarks:

JavaScript: append() VS appendChild() (version: 0)

Comparing performance of: With append() vs With appendChild()

Created: 2 years ago by: Registered User

Jump to the latest result

With append()

With appendChild()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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