Benchmark: createTextNode(and removeChild), textContent, innerText, innerHTML, nodeValue (HTML)

HTML Preparation code:

<a id="a"> </a>

Tests:

appendChild
a.removeChild(a.childNodes[0]); a.appendChild(document.createTextNode('text'));
textContent
a.textContent = 'text';
innerText
a.innerText = 'text';
innerHTML
a.innerHTML = 'text';
nodeValue
a.nodeValue = 'text';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild
textContent
innerText
innerHTML
nodeValue

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Browser/OS: Firefox 90 on Ubuntu

View result in a separate tab

Test name	Executions per second
appendChild	70805.5 Ops/sec
textContent	134269.7 Ops/sec
innerText	126647.6 Ops/sec
innerHTML	135042.4 Ops/sec
nodeValue	807930.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases.

**Benchmark Definition:**
The benchmark measures how long it takes to set and get different attributes of an HTML element's inner text, including `nodeValue`, `textContent`, `innerText`, `innerHTML`, and `appendChild`. The setup is a simple `<a>` tag with a child node (a space character), which makes the `nodeValue` property work correctly.

**Options Compared:**
The benchmark compares the execution times of six different approaches:

1. Setting `nodeValue`: This sets the inner text directly using the `nodeValue` property.
2. Setting `textContent`: This sets the inner text using the `textContent` property, which is a standard method for setting the text content of an element.
3. Setting `innerText`: This sets the inner text using the `innerText` property, which is specific to Internet Explorer.
4. Setting `innerHTML`: This sets the inner HTML of the element using the `innerHTML` property, which includes not only the text content but also other elements within the tag.
5. Removing and appending a child node: This removes the existing child node (a space character) and then appends a new text node with the desired text.

**Pros and Cons of Each Approach:**

* `nodeValue`: This is a straightforward approach, as it directly sets the inner text. However, it may not be as efficient or safe as other methods, as it can lead to security vulnerabilities if used with untrusted data.
* `textContent`: This is a standard method for setting the text content of an element and is generally safe and efficient. However, it may have performance implications if the element has a large amount of child content.
* `innerText`: This is specific to Internet Explorer and may not be supported in other browsers. Additionally, it can lead to security vulnerabilities if used with untrusted data.
* `innerHTML`: This sets the inner HTML of the element, which includes not only the text content but also other elements within the tag. While this method is convenient, it can be inefficient and less safe than setting the `textContent` property directly.
* Removing and appending a child node: This approach can be more efficient than setting the `nodeValue` or `textContent` properties directly, as it avoids creating new text nodes and reduces garbage collection overhead.

**Library Usage:**
None of the test cases explicitly use any libraries. However, the benchmark definition assumes that the `document` object is available, which is a built-in global object in most web browsers.

**Special JavaScript Features or Syntax:**
The benchmark defines some special JavaScript features or syntax:

* The `\r\n` escape sequence is used to introduce line breaks in the code.
* The `let` keyword is not explicitly mentioned, but it's implied for variable declarations (e.g., `let a = document.createElement('a')`).

**Alternative Approaches:**
Some alternative approaches could be considered:

* Using the `DOMParser` API to parse the HTML string and create an element from it.
* Using a library like jQuery or React to manipulate the DOM elements.
* Using a more functional programming approach, such as using the `Array.prototype.map()` method to create new text nodes.

These alternative approaches might be more suitable for specific use cases, but they may also add complexity and overhead to the benchmarking process.

Related benchmarks:

createTextNode(and removeChild), textContent, innerText, innerHTML, nodeValue (HTML) (version: 3)

<a> tag has a child (space), so nodeValue works correctly this way

Comparing performance of: appendChild vs textContent vs innerText vs innerHTML vs nodeValue

Created: 3 years ago by: Registered User

Jump to the latest result

appendChild

textContent

innerText

innerHTML

nodeValue

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):