Benchmark: createTextNode vs textContent vs innerText vs append vs new Text

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');
new text
a.appendChild(new Text('text'));

Historical Performance Data aggregated from 29 community runs

Desktop Results:

Chrome 16 runs

textContent

11.6M/s

append

5.1M/s

innerText

4.3M/s

createTextNode

3.6M/s

new text

3.0M/s

Fastest: textContent (3.9x faster)

View exact numbers

✓ textContent: 11,641,434 ops/sec
• append: 5,097,660 ops/sec
• innerText: 4,276,313 ops/sec
• createTextNode: 3,627,731 ops/sec
• new text: 3,004,156 ops/sec

Firefox 13 runs

textContent

3.9M/s

append

3.7M/s

new text

2.7M/s

createTextNode

2.3M/s

innerText

2.2M/s

Fastest: textContent (1.7x faster)

View exact numbers

✓ textContent: 3,873,182 ops/sec
• append: 3,712,256 ops/sec
• new text: 2,732,788 ops/sec
• createTextNode: 2,323,662 ops/sec
• innerText: 2,230,742 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
new text

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; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Linux

View result in a separate tab

append

4.0M/s

textContent

3.4M/s

new text

3.0M/s

createTextNode

2.4M/s

innerText

2.2M/s

View exact numbers

Test name	Executions per second
✓ append	4,046,192 Ops/sec
textContent	3,381,388 Ops/sec
new text	2,954,413 Ops/sec
createTextNode	2,371,034 Ops/sec
innerText	2,230,742 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of six different approaches to set and retrieve text content on an HTML element: `createTextNode`, `textContent`, `innerText`, `append`, `new Text`, and `appendChild`. The goal is to determine which approach is fastest, most efficient, and reliable.

**Options Compared**

1. **`createTextNode`**: Creates a new text node using the `document.createTextNode()` method.
2. **`textContent`**: Sets the text content of an element using the `element.textContent` property.
3. **`innerText`**: Sets the inner text of an element using the `element.innerText` property (available in HTML5).
4. **`append`**: Appends a string to the end of an element's content using the `element.append()` method (not a standard DOM method, but rather a custom implementation).
5. **`new Text`**: Creates a new text node using the `Text` constructor.
6. **`appendChild`**: Appends a child node to an element using the `element.appendChild()` method.

**Pros and Cons**

1. **`createTextNode`**:
	* Pros: Creates a new, separate text node, which can be beneficial for SEO and accessibility.
	* Cons: May incur additional overhead due to the creation of a new node.
2. **`textContent`**:
	* Pros: Fast and efficient, as it uses the element's internal text storage.
	* Cons: Limited control over the text node's behavior (e.g., no way to set its attributes).
3. **`innerText`**:
	* Pros: Similar to `textContent`, but with better support for HTML5 elements.
	* Cons: Not available in older browsers or IE.
4. **`append`**:
	* Pros: Custom implementation can provide additional features or optimizations.
	* Cons: Non-standard method, which may not be supported by all browsers or environments.
5. **`new Text`**:
	* Pros: Creates a new, separate text node with full control over its attributes.
	* Cons: May incur additional overhead due to the creation of a new node.
6. **`appendChild`**:
	* Pros: Allows for more flexibility and control over the text node's behavior.
	* Cons: May be slower than other methods due to the need to create a child node.

**Library Usage**

The `new Text` method uses the `Text` constructor, which is a built-in JavaScript class. The purpose of this library is to provide a way to create a new text node with custom attributes and behavior.

**Special JS Features or Syntax**

None mentioned in the provided benchmark definition.

**Other Alternatives**

Other approaches to set and retrieve text content include:

1. **`innerHTML`**: Sets the HTML content of an element using the `element.innerHTML` property. However, this method is not recommended due to security concerns (e.g., potential XSS attacks).
2. **`createElementText`**: A proprietary method used by some older browsers or environments to create a new text node.

Keep in mind that these alternatives may have different performance characteristics, pros and cons, and are not recommended for use in modern web development.

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

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

Created: 4 years ago by: Guest

Go to the latest result

createTextNode

textContent

innerText

append

new text

Historical Performance Data aggregated from 29 community runs

Desktop Results:

Chrome 16 runs

Firefox 13 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 vs new Text (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText vs append vs new text

Created: 4 years ago by: Guest

Go to the latest result

createTextNode

textContent

innerText

append

new text

Historical Performance Data aggregated from 29 community runs

Desktop Results:

Chrome 16 runs

Firefox 13 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 vs new text`