Benchmark: createTextNode vs textContent vs innerText

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

textContent

10.0M/s

innerText

3.1M/s

createTextNode

2.2M/s

Fastest: textContent (4.5x faster)

View exact numbers

✓ textContent: 9,999,354 ops/sec
• innerText: 3,065,284 ops/sec
• createTextNode: 2,205,256 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

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

6.7M/s

innerText

3.4M/s

createTextNode

3.2M/s

View exact numbers

Test name	Executions per second
✓ textContent	6,653,045 Ops/sec
innerText	3,377,897 Ops/sec
createTextNode	3,164,339 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark measures the performance of three different ways to set text content on an HTML element: `createTextNode`, `textContent`, and `innerText`. The test creates a new HTML link (`<a>`) element, appends one of these methods to set its text content, and then runs multiple iterations of each method.

**Options Compared**

The three options being compared are:

1. `createTextNode`: This method creates a new Text node and sets it as the child of the `<a>` element.
2. `textContent`: This method sets the text content of the `<a>` element directly.
3. `innerText`: This method sets the inner text (the text within an element's HTML markup) of the `<a>` element.

**Pros and Cons**

Here are some pros and cons of each approach:

1. `createTextNode`:
	* Pros: Can be used to set a fixed string value without affecting other attributes.
	* Cons: Creates a new Text node, which can lead to memory overhead.
2. `textContent`:
	* Pros: Simple and efficient, as it only sets the text content without creating a new element or attribute.
	* Cons: May not be compatible with all browsers or HTML elements.
3. `innerText`:
	* Pros: Often used in older versions of Internet Explorer to set inner text.
	* Cons: Not widely supported across modern browsers, and may lead to inconsistent results.

**Library Used**

There is no library explicitly mentioned in the provided benchmark definition. However, it's worth noting that using libraries like jQuery or React can sometimes optimize DOM manipulation by providing optimized methods for setting element properties.

**Special JS Feature or Syntax (None)**

This benchmark does not use any special JavaScript features or syntax beyond what is required to test these three basic methods.

**Alternative Approaches**

Other alternatives for setting text content on an HTML element include:

1. Using the `innerHTML` property: This method sets both the outer and inner HTML of an element, which can lead to security risks if not used carefully.
2. Setting attributes directly using `setAttribute`: This method allows you to set individual attributes on an element, but may not be as efficient or convenient for setting text content.

**Benchmark Preparation Code**

The script preparation code is:

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

This code creates a new `<a>` element and assigns it to the `a` variable.

**Individual Test Cases**

Each test case defines a different method for setting the text content of the `<a>` element. The three test cases are:

1. `createTextNode`
```javascript
a.appendChild(document.createTextNode('text'));
```

2. `textContent`
```javascript
a.textContent = 'text';
```

3. `innerText`
```javascript
a.innerText = 'text';
```

These methods demonstrate how to set the text content of an HTML element using different approaches.

**Latest Benchmark Result**

The latest benchmark result shows that `textContent` is the fastest approach, followed by `createTextNode`, and then `innerText`. However, please note that these results may vary depending on the specific browser and version being tested.

createTextNode vs textContent vs innerText (version: 0)

Comparing performance of: `createTextNode vs textContent vs innerText`

Created: 8 years ago by: Registered User

Go to the latest result

createTextNode

textContent

innerText

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 (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText

Created: 8 years ago by: Registered User

Go to the latest result

createTextNode

textContent

innerText

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`