Benchmark: createTextNode vs textContent vs innerText vs innerHTML

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 264 community runs

Desktop Results:

Chrome 164 runs

textContent

9.0M/s

innerText

2.9M/s

createTextNode

2.3M/s

innerHTML

1.3M/s

Fastest: textContent (6.8x faster)

View exact numbers

✓ textContent: 9,023,424 ops/sec
• innerText: 2,871,360 ops/sec
• createTextNode: 2,299,629 ops/sec
• innerHTML: 1,331,480 ops/sec

Firefox 67 runs

textContent

4.0M/s

innerHTML

3.2M/s

createTextNode

2.2M/s

innerText

1.9M/s

Fastest: textContent (2.1x faster)

View exact numbers

✓ textContent: 3,990,837 ops/sec
• innerHTML: 3,213,326 ops/sec
• createTextNode: 2,194,729 ops/sec
• innerText: 1,939,491 ops/sec

Mobile Results:

Chrome 33 runs

textContent

4.4M/s

innerText

1.5M/s

createTextNode

1.1M/s

innerHTML

595K/s

Fastest: textContent (7.5x faster)

View exact numbers

✓ textContent: 4,433,690 ops/sec
• innerText: 1,467,680 ops/sec
• createTextNode: 1,082,360 ops/sec
• innerHTML: 594,777 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
innerHTML

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Linux

View result in a separate tab

textContent

15.2M/s

createTextNode

3.6M/s

innerText

2.7M/s

innerHTML

1.7M/s

View exact numbers

Test name	Executions per second
✓ textContent	15,205,014 Ops/sec
createTextNode	3,573,057 Ops/sec
innerText	2,725,965 Ops/sec
innerHTML	1,667,084 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmarking test case hosted on MeasureThat.net, which compares the performance of four different methods for setting text content in an HTML element: `createTextNode`, `textContent`, `innerText`, and `innerHTML`. The test is designed to measure the execution speed of each method across multiple browser-execution combinations.

**Test Cases**

There are four individual test cases:

1. `createTextNode`: This test case creates a new `Text` object using the `document.createTextNode()` method and appends it to an element.
2. `textContent`: This test case sets the text content of an element directly using the `textContent` property.
3. `innerText`: This test case sets the inner text content of an element using the `innerText` property (note that this is a non-standard, proprietary property).
4. `innerHTML`: This test case sets the inner HTML content of an element using the `innerHTML` property.

**Comparison**

The benchmark compares the performance of each method across different browsers and execution conditions. The comparison is likely to highlight the differences in speed between these methods, which can have implications for optimization and performance-critical code.

**Pros and Cons**

Here are some pros and cons associated with each method:

1. `createTextNode`:
	* Pros: Can be more efficient than other methods when creating a new text node.
	* Cons: May incur additional overhead due to the creation of a new object.
2. `textContent`:
	* Pros: Simple and straightforward, no need to create a separate text node.
	* Cons: May not be as efficient as `createTextNode` or `innerHTML`, especially for large text content.
3. `innerText`:
	* Pros: Non-standard property can provide better performance in certain browsers.
	* Cons: Non-standard and may not work consistently across all browsers.
4. `innerHTML`:
	* Pros: Can be more efficient than other methods, as it sets the entire HTML content at once.
	* Cons: May incur additional overhead due to the parsing of HTML, especially for complex documents.

**Library**

There is no explicit mention of a library in the provided JSON. However, some of these methods may rely on internal implementation details or proprietary APIs that are not explicitly exposed by standard JavaScript libraries.

**Special JS Features/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. It focuses solely on comparing the performance of different methods for setting text content in HTML elements.

**Alternatives**

Other alternatives to these methods include:

1. Using a `DOMParser` object to parse an HTML string and set its text content.
2. Creating a new element with a `textContent` property and then appending it to another element.
3. Using a library like jQuery or React, which may provide optimized implementations for setting text content.

Keep in mind that the choice of method ultimately depends on the specific requirements and constraints of your project.

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

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

Created: 7 years ago by: Guest

Go to the latest result

createTextNode

textContent

innerText

innerHTML

Historical Performance Data aggregated from 264 community runs

Desktop Results:

Chrome 164 runs

Firefox 67 runs

Mobile Results:

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

Comparing performance of: createTextNode vs textContent vs innerText vs innerHTML

Created: 7 years ago by: Guest

Go to the latest result

createTextNode

textContent

innerText

innerHTML

Historical Performance Data aggregated from 264 community runs

Desktop Results:

Chrome 164 runs

Firefox 67 runs

Mobile Results:

Chrome 33 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 innerHTML`