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

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: 12 hours ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
createTextNode	1990056.8 Ops/sec
textContent	6789763.0 Ops/sec
innerText	2343193.8 Ops/sec
innerHTML	853676.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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

Comparing performance of: createTextNode vs textContent vs innerText vs innerHTML

Created: 6 years ago by: Guest

Jump to the latest result

createTextNode

textContent

innerText

innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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