Benchmark: append() vs appendChild() for moving a couple elements

append() vs appendChild() for moving a couple elements (version: 0)

ParentNode.append() is more convenient. Is it also faster when moving several elements at once from a parent A to a parent B? https://developer.mozilla.org/en-US/docs/Web/API/Element/append https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Comparing performance of: append() vs appendChild() vs append() with apply() vs appendChild() with loop

Created: 5 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<div id="oldpar"><div id="e1"></div><div id="e2"></div><div id="e3"></div><div id="e4"></div></div>
<div id="newpar"></div>

Script Preparation code:

var newpar = document.getElementById('newpar');
var e1 = document.getElementById('e1');
var e2 = document.getElementById('e2');
var e3 = document.getElementById('e3');
var e4 = document.getElementById('e4');
var es = [e1, e2, e3, e4];

Tests:

append()
newpar.append(e1, e2, e3, e4);
appendChild()
newpar.appendChild(e1); newpar.appendChild(e2); newpar.appendChild(e3); newpar.appendChild(e4);
append() with apply()
newpar.append.apply(newpar, es);
appendChild() with loop
for (var i = 0; i < es.length; i++) newpar.appendChild(es[i]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append()
appendChild()
append() with apply()
appendChild() with loop

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 the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of two different approaches for moving multiple elements from one parent node to another in HTML: `append()` and `appendChild()`. The test also explores alternative methods using the `apply()` method or a loop.

**Options Compared**

The options compared are:

1. **`append()`**: Directly calling the `append()` method on the target element, passing the elements to append as individual arguments.
2. **`appendChild()` with individual calls**: Calling `appendChild()` for each element individually, like in this example: `newpar.appendChild(e1); newpar.appendChild(e2); ...`
3. **`append()` with `apply()`**: Using the `apply()` method to pass an array of elements to the `append()` method.
4. **`appendChild()` with loop**: Using a loop to append each element individually, like in this example: `for (var i = 0; i < es.length; i++) newpar.appendChild(es[i]);`

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. **`append()`**:
	* Pros: Can be more convenient and readable, as it only requires calling one method.
	* Cons: May incur additional overhead due to argument passing and processing.
2. **`appendChild()` with individual calls**:
	* Pros: More straightforward and predictable performance, as each call is independent.
	* Cons: Requires multiple function calls, which can be less efficient than a single `append()` call.
3. **`append()` with `apply()`**:
	* Pros: Reduces the number of arguments to pass, making it more concise.
	* Cons: May incur additional overhead due to method lookup and argument processing.
4. **`appendChild()` with loop**:
	* Pros: Can be more efficient than individual calls, as it avoids unnecessary function calls.
	* Cons: Requires using a loop, which can add complexity.

**Library and Purpose**

The `append()` and `appendChild()` methods are part of the DOM API, specifically provided by the W3C. These methods allow you to dynamically manipulate an HTML document's structure without modifying its source code.

**Special JS Feature/Syntax**

In this benchmark, the use of the `apply()` method is notable, as it demonstrates a concise way to pass multiple arguments to a function. This syntax is widely supported in modern JavaScript engines and can be an efficient way to simplify code.

**Other Alternatives**

Alternative approaches for moving elements from one parent node to another include:

* Using the `removeChild()` method followed by `appendChild()`
* Creating a new container element and appending it to the target parent
* Using a library like jQuery or React, which provides more optimized and convenient APIs for manipulating DOM structures

Keep in mind that these alternatives might not be as straightforward or efficient as using native DOM methods.

Related benchmarks: