Benchmark: JS: append vs appendChild

HTML Preparation code:

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

Script Preparation code:

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

Tests:

append
container.append(paragraph);
appendChild
container.appendChild(paragraph);

Historical Performance Data aggregated from 186 community runs

Desktop Results:

Chrome 96 runs

appendChild

1.7M/s

append

1.4M/s

Fastest: appendChild (1.2x faster)

View exact numbers

✓ appendChild: 1,703,819 ops/sec
• append: 1,443,876 ops/sec

Firefox 71 runs

append

17K/s

appendChild

17K/s

View exact numbers

✓ append: 16,707 ops/sec
• appendChild: 16,504 ops/sec

Safari 8 runs

appendChild

6.1M/s

append

4.9M/s

Fastest: appendChild (1.2x faster)

View exact numbers

✓ appendChild: 6,065,708 ops/sec
• append: 4,892,600 ops/sec

Mobile Results:

Firefox 6 runs

append

16K/s

appendChild

13K/s

Fastest: append (1.3x faster)

View exact numbers

✓ append: 15,962 ops/sec
• appendChild: 12,619 ops/sec

Safari 5 runs

appendChild

7.0M/s

append

6.0M/s

Fastest: appendChild (1.2x faster)

View exact numbers

✓ appendChild: 6,952,616 ops/sec
• append: 5,984,926 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 months ago)

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

Browser/OS: Firefox 146 on Windows

View result in a separate tab

append

13K/s

appendChild

12K/s

View exact numbers

Test name	Executions per second
✓ append	12,627 Ops/sec
appendChild	12,235 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark and its results.

**Benchmark Description**

The benchmark compares two methods for appending an HTML paragraph element to a container element in JavaScript: `container.append(paragraph)` and `container.appendChild(paragraph)`. Both methods are used to add content to an element, but they differ in their implementation details.

**Options Compared**

Two options are compared:

1. `append`: Uses the `append()` method on the `container` element.
2. `appendChild`: Uses the `appendChild()` method on the `container` element.

**Pros and Cons of Each Approach**

1. **`append()` Method**
	* Pros:
		+ Often considered more concise and easier to read.
		+ May be faster, as it's a single operation that doesn't involve creating an intermediate element.
	* Cons:
		+ May not be supported by older browsers or environments that don't implement this method.
		+ Can lead to issues with DOM manipulation, as the append operation can cause unexpected side effects.
2. **`appendChild()` Method**
	* Pros:
		+ Widely supported and reliable across all modern browsers and environments.
		+ Allows for more fine-grained control over the DOM structure.
	* Cons:
		+ Can be less concise and more verbose than the `append()` method.
		+ May be slower due to the creation of an intermediate element.

**Library and Purpose**

The `Element.prototype.append()` and `Element.prototype.appendChild()` methods are part of the HTML5 DOM API, which provides a standard way for JavaScript applications to interact with web pages. These methods allow developers to add content to elements in a consistent and reliable manner.

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* Browser support: If you need to support older browsers or environments that don't implement `append()` or `appendChild()`, you may want to use one of them.
* DOM manipulation: If you're performing complex DOM manipulations, using `appendChild()` can provide more control and flexibility.
* Performance: If performance is a concern, using `append()` might be faster due to its single operation nature.

**Alternative Approaches**

Other approaches for appending content to an element include:

* Using the `innerHTML` property: `container.innerHTML += paragraph.outerHTML;`
	+ Pros: Fast and simple. Cons: Can lead to XSS vulnerabilities if not sanitized properly.
* Using a library or framework: Some libraries, like jQuery, provide their own methods for appending content (e.g., `$('\#container').append(paragraph)`).
* Manual string concatenation: `container.appendChild(document.createTextNode(' ' + paragraph.outerHTML));`
	+ Pros: Portable and compatible with older browsers. Cons: Can lead to slower performance due to the creation of an intermediate element.

Keep in mind that these alternative approaches may have different trade-offs in terms of performance, security, and maintainability.

JS: append vs appendChild (version: 0)

Comparing performance of: `append vs appendChild`

Created: 5 years ago by: Guest

Go to the latest result

append

appendChild

Historical Performance Data aggregated from 186 community runs

Desktop Results:

Chrome 96 runs

Firefox 71 runs

Safari 8 runs

Mobile Results:

Firefox 6 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JS: append vs appendChild (version: 0)

Comparing performance of: append vs appendChild

Created: 5 years ago by: Guest

Go to the latest result

append

appendChild

Historical Performance Data aggregated from 186 community runs

Desktop Results:

Chrome 96 runs

Firefox 71 runs

Safari 8 runs

Mobile Results:

Firefox 6 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `append vs appendChild`