Benchmark: innerhtml vs removechild vs remove vs innerText vs textContent vs replaceChildren

HTML Preparation code:

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

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));

Tests:

innerHTML
var node = document.getElementById('container'); node.innerHTML = '';
removeChild
var node = document.getElementById('container'); while(node.firstChild) node.removeChild(node.firstChild)
remove
var node = document.getElementById('container'); while(node.firstChild) node.firstChild.remove()
innerText
var node = document.getElementById('container'); node.innerText = '';
textContent
var node = document.getElementById('container'); node.textContent = '';
replaceChildren
var node = document.getElementById('container'); node.replaceChildren()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
remove
innerText
textContent
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Linux

View result in a separate tab

Test name	Executions per second
innerHTML	2814145.5 Ops/sec
removeChild	4914551.5 Ops/sec
remove	4944070.0 Ops/sec
innerText	3686908.2 Ops/sec
textContent	2817907.0 Ops/sec
replaceChildren	2743750.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark tested in this JSON involves comparing various methods for clearing or removing child elements from a DOM node in JavaScript, specifically checking the performance of different approaches when dealing with a specific `<div>` container filled with 1,000 child `<div>` elements.

### Methods Tested

1. **innerHTML**:
   - **Code**: `node.innerHTML = '';`
   - **Description**: This method sets the HTML content of the `node` to an empty string. This effectively removes all child elements.
   - **Pros**: Simple and concise; removes all children at once.
   - **Cons**: Can be slower in certain cases, as it causes the browser to reparse the HTML and reflow the layout.

2. **removeChild**:
   - **Code**: `while(node.firstChild) node.removeChild(node.firstChild);`
   - **Description**: This method iteratively removes each child from the `node` until there are no more children left.
   - **Pros**: Explicitly removes each child node, which may provide more control or allow for specific actions on each removal.
   - **Cons**: Can be slower due to the repetitive method calls, as every single child removal causes reflow.

3. **remove**:
   - **Code**: `while(node.firstChild) node.firstChild.remove();`
   - **Description**: Similar to `removeChild`, this method uses the `remove()` method on each child node to remove it from the DOM.
   - **Pros**: Cleaner syntax and may be more intuitive; has slightly more overhead as it runs a method on each child.
   - **Cons**: Performance can be similar to `removeChild`, depending on the number of elements and layout complexity.

4. **innerText**:
   - **Code**: `node.innerText = '';`
   - **Description**: This property sets the text content of the element to an empty string, effectively clearing out any text and child elements.
   - **Pros**: Straightforward for users focusing only on text; handles hidden elements as well.
   - **Cons**: Similar to `innerHTML`, it can be less efficient for simply clearing DOM elements compared to other methods.

5. **textContent**:
   - **Code**: `node.textContent = '';`
   - **Description**: This property sets the text content of an element without parsing HTML, removing all child nodes.
   - **Pros**: More efficient than `innerText` as it does not involve layout recalculations for hidden elements.
   - **Cons**: It clears all content, including text-based nodes, which may not be desired in all scenarios.

6. **replaceChildren**:
   - **Code**: `node.replaceChildren();`
   - **Description**: This method removes all child nodes and replaces them with new children (if any). In this case, no new children are provided.
   - **Pros**: Very concise and efficient as it directly addresses the removal of all children.
   - **Cons**: Less commonly used; may have compatibility issues with very old browsers.

### Performance Insights

Based on the benchmark results obtained from running these methods on a desktop Linux environment with Chrome 129:

- **Fastest**: The `remove` method was the best performer, followed closely by `removeChild`. Both methods efficiently operated on child nodes without excessive reflow.
- **Moderate Performance**: `innerText` and `textContent` provided competitive yet relatively slower performance compared to `remove` and `removeChild`.
- **Slowest**: `innerHTML` and `replaceChildren` were at the lower end of the performance spectrum, mainly due to the overhead of parsing or handling layout changes.

### Considerations and Alternatives

When choosing a method to clear child nodes, you may consider:

- **Simplicity vs. Performance**: If performance is critical, methods like `remove` and `removeChild` might be preferred. For readability or ease of use, `innerHTML` might be a valid choice, though it's essential to be aware of potential drawbacks.
- **Browser Compatibility**: Ensure that the chosen method is compatible with the target browsers, especially if using features like `replaceChildren` which may not be supported in older browsers.
- **Further Alternatives**: Other options include using libraries like jQuery, which abstracts DOM manipulation and can offer chainable methods such as `.empty()`, providing a simpler API for common operations like clearing a node's contents, albeit potentially at a performance cost.

Overall, testing different methods based on the specific scenario and understanding their implications is key for making informed choices in JavaScript DOM manipulation tasks.

Related benchmarks:

innerhtml vs removechild vs remove vs innerText vs textContent vs replaceChildren (version: 0)

Comparing performance of: innerHTML vs removeChild vs remove vs innerText vs textContent vs replaceChildren

Created: 2 months ago by: Guest

Jump to the latest result

innerHTML

removeChild

remove

innerText

textContent

replaceChildren

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):