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'));

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: 21 days ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
createTextNode	7182606.5 Ops/sec
textContent	31741844.0 Ops/sec
innerText	6907534.0 Ops/sec
append	8853421.0 Ops/sec
new text	4372737.0 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.

Related benchmarks:

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

Jump to the latest result

createTextNode

textContent

innerText

append

new text

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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