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

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark is designed to compare four methods for setting text content in HTML elements: `createTextNode`, `textContent`, `innerText`, and `innerHTML`. The benchmark prepares an HTML element, `a`, and then tests each method by setting the corresponding value to it.

**Options Compared**

1. **createTextNode**: Creates a new text node using the `document.createTextNode()` method and appends it to the HTML element.
2. **textContent**: Sets the text content of the HTML element directly using the `textContent` property.
3. **innerText**: Sets the inner text of the HTML element (i.e., the text content without any attributes or child nodes) using the `innerText` property.
4. **innerHTML**: Sets the HTML content of the HTML element, including the text and any attributes or child nodes.

**Pros and Cons**

*   **createTextNode**:
    *   Pros: Can be more efficient if the text node needs to be reused elsewhere in the code.
    *   Cons: Creates an additional DOM object, which may lead to increased memory usage and garbage collection overhead.
*   **textContent**:
    *   Pros: Sets the text content directly, without creating an extra DOM object. Also, it updates the element's text content more accurately than `innerText`.
    *   Cons: May not work correctly if the element has attributes or child nodes that need to be updated as well.
*   **innerText**:
    *   Pros: Similar to `textContent`, but with additional benefits for cases where only the inner text needs to be updated, like when using a rich text editor or displaying a preview of an input field.
    *   Cons: May not work correctly if the element has attributes or child nodes that need to be updated as well.
*   **innerHTML**:
    *   Pros: Works with any HTML content, including tags, attributes, and child nodes. However, it can lead to slower performance due to the increased complexity of parsing the HTML content.
    *   Cons: Sets the entire HTML content, which may not always be what you want.

**Library Usage**

The `document` object is used extensively in this benchmark, as it represents the global DOM (Document Object Model) and provides access to various methods for creating, manipulating, and querying HTML elements. The `textContent`, `innerText`, and `innerHTML` properties are part of the `HTMLElement` interface, which is a property of the `document` object.

**Special JavaScript Features**

There are no special JavaScript features or syntax used in this benchmark that would be unfamiliar to most software engineers.

**Other Alternatives**

In terms of alternatives for setting text content, some other methods include:

*   Using a library like jQuery or React, which provide their own APIs for working with HTML elements and handling text updates.
*   Using a template engine or a string interpolation function, such as Handlebars or Mustache, to render dynamic text content in a HTML string.

In general, the choice of method depends on the specific requirements of your project, including performance considerations, memory usage constraints, and the need for advanced features like DOM manipulation and event handling.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0

Browser/OS: Firefox 114 on Windows

View result in a separate tab

Test name	Executions per second
createTextNode	1397677.0 Ops/sec
textContent	3240992.0 Ops/sec
innerText	2277158.0 Ops/sec
innerHTML	3624357.0 Ops/sec

Related benchmarks:

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

Comparing performance of: createTextNode vs textContent vs innerText vs innerHTML

Created: 2 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 Sumamry (model llama3.2:3b, generated 2 days ago):