Benchmark: JS: append vs appendChild - multiple nodes

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var container = document.getElementById("container");
var paragraph = document.createElement("p");
var div = document.createElement("div");
var section = document.createElement("section");

Tests:

append
container.append(paragraph, div, section);
appendChild
container.appendChild(paragraph); container.appendChild(div); container.appendChild(section);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
appendChild

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 103 on Windows 7

View result in a separate tab

Test name	Executions per second
append	110931.4 Ops/sec
appendChild	142992.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**What is being tested?**

The benchmark tests two different approaches for appending elements to a DOM container: `container.append(paragraph, div, section)` (Method 1) and `container.appendChild(paragraph); container.appendChild(div); container.appendChild(section)` (Method 2).

**Options compared**

In Method 1, the `append` method is used to append all three elements (`paragraph`, `div`, and `section`) at once. In Method 2, each element is appended individually using the `appendChild` method.

**Pros and Cons of each approach:**

* **Method 1 (container.append):**
	+ Pros:
		- Often faster, as it reduces the number of DOM mutations.
		- Can be more efficient for large datasets or multiple elements to append.
	+ Cons:
		- May not work in older browsers that don't support this method.
		- Can lead to unexpected behavior if not handled carefully (e.g., if an element has a non-standard structure).
* **Method 2 (container.appendChild):**
	+ Pros:
		- Works in all modern browsers, including Internet Explorer and Edge.
		- Allows for more control over the individual elements being appended.
	+ Cons:
		- Can be slower due to the repeated DOM mutations.
		- May be less efficient for large datasets or multiple elements.

**Library usage**

In this benchmark, no specific libraries are used. However, the `document.createElement` method is used to create new HTML elements.

**Special JavaScript features or syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. The code uses standard ECMAScript syntax and doesn't include any experimental features or proprietary extensions.

**Other alternatives**

If you were looking for alternative approaches, you could also consider using:

* `container.insertAdjacentHTML` (a more modern method that inserts HTML content directly into the DOM)
* Using a library like jQuery, which provides its own set of methods for manipulating the DOM (e.g., `$()` can be used to append elements)

Keep in mind that these alternatives may not be included in this specific benchmark, as it focuses on native JavaScript methods.

Overall, the choice between Method 1 and Method 2 depends on your specific use case, browser requirements, and performance considerations.

Related benchmarks:

JS: append vs appendChild - multiple nodes (version: 0)

Comparing performance of: append vs appendChild

Created: 2 years ago by: Guest

Jump to the latest result

append

appendChild

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):