Benchmark: append vs appendChild v20

HTML Preparation code:

<div id='one'></div>

Tests:

append
let theDiv = document.getElementById('one'), theDivText1 = document.createTextNode("one"), theDivText2 = document.createTextNode("two"); theDiv.textContent = ''; theDiv.append(theDivText1, theDivText2);
appendChild
let theDiv = document.getElementById('one'), theDivText1 = document.createTextNode("one"), theDivText2 = document.createTextNode("two"); theDiv.textContent = ''; theDiv.appendChild(theDivText1); theDiv.appendChild(theDivText2);

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
append	787839.9 Ops/sec
appendChild	933878.4 Ops/sec

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 on the provided JSON.

**Benchmark Definition**

The benchmark is testing two different ways to append text content to an HTML element: `append` and `appendChild`. The `append` method appends multiple elements at once, while `appendChild` appends a single element at a time.

**Options Compared**

In this benchmark, two options are being compared:

1. **`append`**: Appends both `theDivText1` and `theDivText2` to the `theDiv` element in a single operation.
2. **`appendChild`**: Appends `theDivText1` to the `theDiv` element first, and then appends `theDivText2`.

**Pros and Cons of Each Approach**

* **`append`**: Pros:
	+ More efficient, as it reduces the number of DOM mutations.
	+ Can be faster, since it's a single operation.
Cons:
	+ May not work correctly in all situations (e.g., when the text content needs to be updated dynamically).
* **`appendChild`**: Pros:
	+ Works correctly in most situations.
Cons:
	+ Requires multiple DOM mutations, which can be slower.

**Library and Purpose**

In this benchmark, no specific library is being used. The tests are focused on the built-in `append` and `appendChild` methods of the Document Object Model (DOM).

**Special JS Features or Syntax**

None mentioned in this benchmark. However, it's worth noting that both `append` and `appendChild` methods have been available in JavaScript since the early 2000s.

**Other Considerations**

When using these methods, it's essential to consider the following:

* When appending multiple elements at once (`append`), ensure that all elements are properly updated (e.g., text content, styles).
* When appending individual elements at a time (`appendChild`), ensure that each element is properly updated before appending the next one.

**Alternatives**

If you need to append text content to an HTML element, other alternatives include:

1. `insertAdjacentHTML()`: Appends new HTML content adjacent to an existing element.
2. `textContent` with multiple assignments: Can be used to update text content in a single operation, but may not work correctly if the text content needs to be updated dynamically.

In summary, this benchmark tests two common ways to append text content to an HTML element: `append` and `appendChild`. The `append` method is more efficient but may not work correctly in all situations, while `appendChild` works correctly but requires multiple DOM mutations.

Related benchmarks:

append vs appendChild v20 (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>

Fastest: N/A

Slowest: N/A

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