Benchmark: createTextNode vs innerHTML vs innerText

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
innerHTML
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
createTextNode	1337152.8 Ops/sec
innerHTML	775539.1 Ops/sec
innerText	2057343.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to create and update text content in an HTML element: `createTextNode`, `innerHTML`, and `innerText`. The test case uses a simple scenario where a link (`<a>`) is created, and its text content is updated using each approach.

**Options Compared**

*   `createTextNode`: Creates a new text node using the `document.createTextNode()` method.
*   `innerHTML`: Sets the inner HTML of an element using the `element.innerHTML` property.
*   `innerText`: Sets the inline content of an element using the `element.innerText` property (available in modern browsers).

**Pros and Cons**

*   **createTextNode**: Pros:
    *   More controlled and predictable performance, as it avoids parsing HTML and CSS rules.
    *   Can be used with more advanced text manipulation techniques.
    *
    *   Cons:
    *   May incur additional overhead due to creating a new text node.
*   `innerHTML`: Pros:
    *   Faster execution, as it leverages the browser's existing rendering pipeline.
    *   More convenient and concise syntax.
*
*   `innerText` (modern browsers only): Pros:
    *   Fastest execution speed among the three options.
    *   Convenient and concise syntax.
*   Cons:
    *   May not work in older browsers that do not support this property.

**Library and Special JS Features**

The benchmark uses the `document` object, which is a standard part of the DOM (Document Object Model). No additional libraries are required for this test. There are no special JavaScript features or syntax used beyond basic DOM manipulation.

**Other Alternatives**

For a more comprehensive understanding of text node creation and manipulation, consider alternative approaches:

*   Using `document.createTextNode()` in combination with `appendChild()` to create complex text structures.
*   Leveraging HTML5's native `textContent` property for faster and more efficient text updates.
*   Implementing custom text rendering using canvas or WebGL for high-performance graphics applications.

Keep in mind that the choice of approach depends on your specific use case, target browsers, and performance requirements.

Related benchmarks:

createTextNode vs innerHTML vs innerText (version: 0)

Comparing performance of: createTextNode vs innerHTML vs innerText

Created: 7 years ago by: Guest

Jump to the latest result

createTextNode

innerHTML

innerText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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