Benchmark: createTextNode, textContent, innerContent, innerText, innerHTML, nodeValue

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';
nodeValue
a.nodeValue = 'text';
innerContent
a.innerContent = 'text';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
textContent
innerText
innerHTML
nodeValue
innerContent

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and analyze what's being tested, compared options, pros and cons, library usage, special JS features or syntax, and alternatives.

**What is being tested?**

The provided benchmark tests six different ways to set text content for an HTML element:

1. `createTextNode`: Creating a new text node using the `document.createTextNode()` method.
2. `textContent`: Setting the `textContent` property of the element directly.
3. `innerText`: Setting the `innerText` property of the element (note: this is specific to Internet Explorer).
4. `innerHTML`: Setting the `innerHTML` property of the element, which includes both text and HTML content.
5. `nodeValue`: Setting the `nodeValue` property of the element (only applicable for Node objects).
6. `innerContent`: There is no standard JavaScript property called `innerContent`. It's possible that this is a custom or proprietary property used by the browser or library being tested.

**Comparison options**

The benchmark compares the performance of each method:

* `createTextNode`
* `textContent`
* `innerText` (only applicable for Chrome 96 on Mac OS X)
* `innerHTML`
* `nodeValue`

**Pros and cons:**

1. **createTextNode**:
	* Pros: Can be used to create a new text node, which can be useful in certain scenarios.
	* Cons: May incur overhead due to creating a new object.
2. **textContent**:
	* Pros: Fast and efficient, as it only sets the text content without modifying the element's structure.
	* Cons: May not work correctly with HTML elements that contain other attributes or attributes-specific content (e.g., `alt` attribute).
3. **innerText**:
	* Pros: Specific to Internet Explorer and can be useful in legacy browser support scenarios.
	* Cons: Not supported by modern browsers, and may have performance implications due to the specific implementation.
4. **innerHTML**:
	* Pros: Fast and efficient, as it sets both text and HTML content in a single operation.
	* Cons: May incur overhead due to parsing HTML content, which can lead to performance issues with complex or malformed HTML.
5. **nodeValue**:
	* Pros: Fast and efficient, as it only sets the node value without modifying the element's structure.
	* Cons: Only applicable for Node objects (e.g., `document.createTextNode()`) and may not work correctly with HTML elements.

**Library usage**

There are no libraries explicitly mentioned in the benchmark definition. However, some browsers like Chrome 96 on Mac OS X use proprietary properties or methods that might be specific to those environments. For example:

* `innerText` is a property used by Internet Explorer.
* The `innerContent` property seems to be specific to the browser's internal implementation.

**Special JS features or syntax**

None of the provided benchmark definitions rely on special JavaScript features or syntax beyond standard ECMAScript.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createTextNode	1196146.5 Ops/sec
textContent	5247276.0 Ops/sec
innerText	1080058.9 Ops/sec
innerHTML	384940.7 Ops/sec
nodeValue	7006807.0 Ops/sec
innerContent	15774213.0 Ops/sec

Related benchmarks:

createTextNode, textContent, innerContent, innerText, innerHTML, nodeValue (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText vs innerHTML vs nodeValue vs innerContent

Created: 2 years ago by: Registered User

Jump to the latest result

createTextNode

textContent

innerText

innerHTML

nodeValue

innerContent

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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