Benchmark: createTextNode vs textContent vs innerText vs append

Script Preparation code:

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

Tests:

createTextNode
a.appendChild(document.createTextNode('text'));
textContent
a.textContent = 'text';
innerText
a.innerText = 'text';
append
a.append('text');

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

textContent

9.0M/s

append

4.2M/s

innerText

3.7M/s

createTextNode

2.6M/s

Fastest: textContent (3.5x faster)

View exact numbers

✓ textContent: 9,047,998 ops/sec
• append: 4,198,236 ops/sec
• innerText: 3,658,766 ops/sec
• createTextNode: 2,566,190 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
createTextNode
textContent
innerText
append

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

textContent

8.9M/s

innerText

4.7M/s

append

4.3M/s

createTextNode

4.0M/s

View exact numbers

Test name	Executions per second
✓ textContent	8,911,574 Ops/sec
innerText	4,716,822 Ops/sec
append	4,265,972 Ops/sec
createTextNode	3,953,100 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Overview**

The benchmark compares four different approaches to appending or setting text content on an HTML element: `createTextNode`, `textContent`, `innerText`, and `append`. The test is run in a Firefox browser on a Windows desktop device.

**Approaches Compared**

1. **`createTextNode`**: This method creates a new Text node object using the `document.createTextNode()` method, which returns a node that represents plain text.
2. **`textContent`**: This method sets the text content of an element directly. It replaces any existing child nodes or text content with the specified value.
3. **`innerText`**: This method is not supported in older browsers, but it's available in modern versions like Firefox 130. It sets the inner text of an element, which includes HTML tags and attributes. In older browsers, `textContent` would be used instead.
4. **`append`**: This method appends a string to the end of an element's contents.

**Pros and Cons**

* **`createTextNode`**: Creates a new Text node object, which can be useful for precise control over text content. However, it requires creating a separate node, which might incur additional overhead.
* **`textContent`**: Sets the text content directly, which is fast but may replace existing child nodes or text content. In some cases, this can lead to unnecessary reflows or layout recalculations.
* **`innerText` (modern browsers)**: Sets the inner text of an element, including HTML tags and attributes. This approach can be useful when you need to preserve the original structure, but it may not be supported in older browsers.
* **`append`**: Appends a string to the end of an element's contents, which is simple and fast but might lead to unnecessary reflows or layout recalculations if not done carefully.

**Library Used**

None explicitly mentioned. The benchmark only uses standard JavaScript APIs and DOM methods.

**Special JS Feature/Syntax**

There are no specific JavaScript features or syntaxes being tested in this benchmark. It focuses on comparing the performance of different text content manipulation approaches.

**Other Alternatives**

Alternative approaches to appending or setting text content include:

* Using `innerHTML` instead of `textContent` (which can be faster but may lead to security issues if not sanitized)
* Using a custom DOM element, such as a `span`, and inserting it manually using the `insertAdjacentHTML()` method
* Using a library like jQuery to handle text content manipulation (not explicitly mentioned in this benchmark)

Keep in mind that these alternative approaches might have their own trade-offs in terms of performance, security, or convenience.

createTextNode vs textContent vs innerText vs append (version: 0)

Comparing performance of: `createTextNode vs textContent vs innerText vs append`

Created: 5 years ago by: Registered User

Go to the latest result

createTextNode

textContent

innerText

append

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

createTextNode vs textContent vs innerText vs append (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText vs append

Created: 5 years ago by: Registered User

Go to the latest result

createTextNode

textContent

innerText

append

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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: `createTextNode vs textContent vs innerText vs append`