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

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

Test name	Executions per second
createTextNode	3164339.0 Ops/sec
textContent	6653045.0 Ops/sec
innerText	3377897.0 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.

Related benchmarks:

createTextNode vs textContent vs innerText (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText

Created: 8 years ago by: Registered User

Jump to the latest result

createTextNode

textContent

innerText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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