Benchmark: innerHTML vs replaceChildren to empty an element

HTML Preparation code:

<table>
  <tr>
    <td id="title"><span>Some text</span></td>
    <td id="url"><span>Some other text</span></td>
  </tr>
</table>

Script Preparation code:

const title = document.getElementById('title');
const url = document.getElementById('url');

Tests:

innerHTML
title.innerHTML = ""; url.innerHTML = "";
replaceChildren
title.replaceChildren(); url.replaceChildren();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/109.0

Browser/OS: Firefox 109 on Mac OS X 10.15

View result in a separate tab

replaceChildren

3.9M/s

innerHTML

2.2M/s

View exact numbers

Test name	Executions per second
✓ replaceChildren	3,862,921 Ops/sec
innerHTML	2,172,148 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of two different approaches to clear an HTML element: using `innerHTML` and `replaceChildren`. Let's break down what each option entails, their pros and cons, and other considerations.

**Options Compared**

1. **innerHTML**: This method replaces the entire content of an element with a new string.
2. **replaceChildren**: This method removes all child elements from an element and can be used to replace them with new ones.

**Pros and Cons**

* `innerHTML`:
	+ Pros: Simple, easy to use, and widely supported.
	+ Cons: Can lead to performance issues if the content is large or complex, as it involves creating a temporary string object that needs to be parsed by the browser's parser.
* `replaceChildren`:
	+ Pros: More efficient than `innerHTML`, especially for large or complex content, as it only removes child elements without creating a new string object.
	+ Cons: Less widely supported and may require more effort to set up correctly.

**Other Considerations**

* In terms of browser support, both methods are generally supported by modern browsers. However, some older browsers might not support `replaceChildren`.
* When using `innerHTML`, it's essential to be cautious when dealing with HTML entities or special characters, as they may not be properly decoded.
* When using `replaceChildren`, it's crucial to ensure that the new child elements are created correctly and that any events attached to them are properly wired up.

**Library Usage**

There is no library used in this benchmark. However, if you were to use a library for DOM manipulation, some popular options include:

* jQuery: Provides a convenient `empty()` method for removing content from an element.
* React or ReactDOM: Offer methods like `setState()` and `forceUpdate()` for updating component state and DOM elements.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark. However, if you were to use some advanced techniques like:

* Proxies: Could be used to optimize the removal of child elements.
* WebAssembly: Might provide a performance boost for certain use cases.

Overall, the choice between `innerHTML` and `replaceChildren` depends on your specific use case, performance requirements, and browser support. If you need to clear an element frequently or work with complex content, `replaceChildren` might be a better option. Otherwise, `innerHTML` is often a simpler and more straightforward solution.

**Alternatives**

Other alternatives for clearing an HTML element include:

* Using `outerHTML`: Replaces the entire outer HTML of an element with a new string.
* Creating a temporary element and appending it to the target element: This method can be more efficient than using `innerHTML` or `replaceChildren`, but requires more effort to set up correctly.
* Using a library like React or Angular for DOM manipulation, which often provide optimized methods for updating component state and DOM elements.

innerHTML vs replaceChildren to empty an element (version: 0)

Comparing performance of: `innerHTML vs replaceChildren`

Created: 2 years ago by: Registered User

Go to the latest result

innerHTML

replaceChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

innerHTML vs replaceChildren to empty an element (version: 0)

Comparing performance of: innerHTML vs replaceChildren

Created: 2 years ago by: Registered User

Go to the latest result

innerHTML

replaceChildren

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: `innerHTML vs replaceChildren`