Benchmark: innerHTML vs. removeChild vs. jQuery.html() vs. replaceChildren

HTML Preparation code:

<div id='test'>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <div>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <div>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Script Preparation code:

function removeAllNodeChildren(node) {
    while (node.hasChildNodes()) {
        node.removeChild(node.lastChild);
    }
    return node;
}

function purge(node) {
    if (node.hasChildNodes()) {
        node.innerHTML = '';
    }
    return node;
}

Tests:

removeChild
removeAllNodeChildren(document.getElementById('test').cloneNode(true));
innerHTML
purge(document.getElementById('test').cloneNode(true));
jQuery
$(document.getElementById('test').cloneNode(true)).html('')
replaceChildren
document.getElementById('test').cloneNode(true).replaceChildren();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
removeChild
innerHTML
jQuery
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
removeChild	13232.0 Ops/sec
innerHTML	20030.9 Ops/sec
jQuery	14821.2 Ops/sec
replaceChildren	13927.2 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 JSON and explain what is being tested.

**Benchmark Definition**

The benchmark defines four test cases:

1. `innerHTML`: Uses the `purge` function to clear the inner HTML of an element.
2. `removeChild`: Uses the `removeAllNodeChildren` function to remove all child nodes from an element, then clones the original node and removes its children again.
3. `jQuery`: Uses jQuery's `html` method to clear the inner HTML of an element.
4. `replaceChildren`: Uses the `replaceChildren` method to replace the contents of an element with a new set of elements.

**Options Compared**

The benchmark compares the performance of these four approaches:

* **innerHTML**: Clears the inner HTML of an element by setting its `innerHTML` property to an empty string.
* **removeChild**: Removes all child nodes from an element, clones the original node, and then removes its children again.
* **jQuery**: Uses jQuery's `html` method to clear the inner HTML of an element.
* **replaceChildren**: Replaces the contents of an element with a new set of elements.

**Pros and Cons**

Here are some pros and cons for each approach:

* **innerHTML**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: Can be slow if the inner HTML is large or complex.
* **removeChild**:
	+ Pros: Can be effective for removing all child nodes, but can be slow due to the repeated removal of children.
	+ Cons: Requires more code and calculations than `innerHTML`.
* **jQuery**:
	+ Pros: Convenient and widely supported, especially with jQuery's DOM manipulation capabilities.
	+ Cons: May introduce additional overhead due to the use of a library.
* **replaceChildren**:
	+ Pros: Can be effective for replacing an element's contents without modifying its structure.
	+ Cons: Requires more code and calculations than `innerHTML`.

**Other Considerations**

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

* **DOM manipulation**: These methods modify the Document Object Model (DOM), which can impact performance, especially if the DOM is large or complex.
* **Browser support**: Make sure that your approach works across different browsers and versions.
* **Libraries and dependencies**: Consider the potential overhead of using a library like jQuery.

**Alternative Approaches**

Other approaches to clear an element's contents without modifying its structure include:

* Using `textContent` instead of `innerHTML`.
* Creating a new element with the desired content and appending it to the original element.
* Using CSS to hide or display the element's content instead of clearing it programmatically.

In summary, the benchmark provides a comprehensive comparison of four approaches for clearing an element's contents. Understanding the pros and cons of each approach will help you choose the most efficient solution for your specific use case.

Related benchmarks:

innerHTML vs. removeChild vs. jQuery.html() vs. replaceChildren (version: 0)

Comparing performance of: removeChild vs innerHTML vs jQuery vs replaceChildren

Created: 3 years ago by: Guest

Jump to the latest result

removeChild

innerHTML

jQuery

replaceChildren

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