Benchmark: createTextNode vs textContent vs innerText vs append vs innerHTML vs insertAdjacentHTML vs nodeValue vs replaceChildren vs appendChild

Script Preparation code:

var span = document.createElement('span');

Tests:

createTextNode
span.appendChild(document.createTextNode('Hello, World! 🥺'));
textContent
span.textContent = 'Hello, World! 🥺';
innerText
span.innerText = 'Hello, World! 🥺';
append
span.append('Hello, World! 🥺');
innerHTML
span.innerHTML = 'Hello, World! 🥺';
insertAdjacentHTML
span.insertAdjacentHTML("beforeend", 'Hello, World! 🥺');
nodeValue
span.nodeValue = 'Hello, World! 🥺';
replaceChildren
span.replaceChildren('Hello, World! 🥺');
appendChild
span.appendChild(new Text('Hello, World! 🥺'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
textContent
innerText
append
innerHTML
insertAdjacentHTML
nodeValue
replaceChildren
appendChild

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/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
createTextNode	1885631.5 Ops/sec
textContent	8637319.0 Ops/sec
innerText	2656928.0 Ops/sec
append	3772980.2 Ops/sec
innerHTML	811042.2 Ops/sec
insertAdjacentHTML	883924.5 Ops/sec
nodeValue	15813025.0 Ops/sec
replaceChildren	2676561.0 Ops/sec
appendChild	1864055.8 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 benchmark and explain what's being tested, the pros and cons of each approach, and other considerations.

**Benchmark Overview**

The benchmark is designed to compare the performance of different ways to set or update text content on an HTML element using JavaScript. The benchmark consists of 8 test cases, each testing a specific method:

1. `createTextNode`
2. `textContent`
3. `innerText`
4. `append`
5. `innerHTML`
6. `insertAdjacentHTML`
7. `nodeValue`
8. `replaceChildren`

**What's being tested**

In each test case, the benchmark creates an HTML element (a `<span>` in this case) and then uses the specified method to set or update its text content with a fixed string ("Hello, World!"). The goal is to measure which method is fastest.

**Options compared**

Here's a brief overview of each option being tested:

1. `createTextNode`: Creates a new `Text` object and assigns it to the element.
2. `textContent`: Sets the text content directly on the element using the `textContent` property.
3. `innerText`: Sets the inner text (not the same as `textContent`, which includes whitespace) using the `innerText` property.
4. `append`: Appends a new string to the existing text content of the element using the `append` method.
5. `innerHTML`: Sets the HTML content (including tags and attributes) of the element using the `innerHTML` property.
6. `insertAdjacentHTML`: Inserts a new HTML fragment into the element's content before the end of its children using the `insertAdjacentHTML` method.
7. `nodeValue`: Sets the node value (i.e., the text content) of the element using the `nodeValue` property (not available in all browsers).
8. `replaceChildren`: Replaces the entire child content of the element with a new string using the `replaceChildren` method.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. `createTextNode`:
	* Pros: Fast, efficient, and well-supported across browsers.
	* Cons: May not work as expected in older browsers or with certain DOM manipulations.
2. `textContent`:
	* Pros: Wide browser support, easy to use, and suitable for most cases.
	* Cons: May include whitespace characters, which can affect layout.
3. `innerText`:
	* Pros: Similar to `textContent`, but excludes whitespace characters.
	* Cons: Not all browsers support this property; may not work as expected in older browsers.
4. `append`:
	* Pros: Simple and easy to use; suitable for appending new text to existing content.
	* Cons: May lead to inefficient memory usage or layout issues if used excessively.
5. `innerHTML`:
	* Pros: Easy to use, suitable for setting HTML content with tags and attributes.
	* Cons: Can be slow due to the overhead of parsing HTML; may introduce security risks if not sanitized properly.
6. `insertAdjacentHTML`:
	* Pros: Fast and efficient, suitable for inserting new HTML fragments without rewriting existing content.
	* Cons: May require more DOM manipulation than other methods; limited browser support.
7. `nodeValue`:
	* Pros: Suitable for setting text content exclusively (excluding whitespace characters).
	* Cons: Not all browsers support this property; may not work as expected in older browsers.
8. `replaceChildren`:
	* Pros: Fast and efficient, suitable for replacing entire child content with a new string.
	* Cons: May be overkill for simple cases; limited browser support.

**Other considerations**

1. **Security**: When using methods like `innerHTML`, ensure that the input is sanitized to prevent XSS attacks.
2. **Browser compatibility**: Be aware of potential issues across different browsers, especially older ones.
3. **Performance**: Optimize your choice of method based on the specific use case and performance requirements.

In summary, this benchmark provides a comprehensive comparison of various methods for setting or updating text content on an HTML element using JavaScript. By understanding the pros and cons of each approach, you can make informed decisions about which method to use in different scenarios.

Related benchmarks:

createTextNode vs textContent vs innerText vs append vs innerHTML vs insertAdjacentHTML vs nodeValue vs replaceChildren vs appendChild (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText vs append vs innerHTML vs insertAdjacentHTML vs nodeValue vs replaceChildren vs appendChild

Created: one year ago by: Guest

Jump to the latest result

createTextNode

textContent

innerText

append

innerHTML

insertAdjacentHTML

nodeValue

replaceChildren

appendChild

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