Benchmark: createTextNode vs textContent vs innerText vs innerHTML (+ version)

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: one month ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
createTextNode	1947529.8 Ops/sec
textContent	1.7 Ops/sec
innerText	1.4 Ops/sec
innerHTML	0.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares four methods of manipulating the DOM in JavaScript: `createTextNode`, `textContent`, `innerText`, and `innerHTML`. It aims to measure the performance of these methods in terms of how many executions can be performed per second on a mobile device running Chrome.

### Methods Compared:

1. **`createTextNode`**:
   - **Benchmark Definition**: `a.appendChild(document.createTextNode('text'));`
   - **Description**: This method creates a new text node and appends it to the element `a`.
   - **Pros**: 
     - Efficient in terms of memory usage and performance when inserting plain text.
     - Avoids issues related to HTML parsing or rendering.
   - **Cons**: 
     - Slightly more verbose than other methods as it requires creating an additional node.

2. **`textContent`**:
   - **Benchmark Definition**: `a.textContent += 'text';`
   - **Description**: This property sets or retrieves the text content of the element `a`. Using `+=` appends to the existing text.
   - **Pros**: 
     - Simple to use for adding or modifying text content.
     - Automatically escapes any HTML, making it safer from XSS attacks.
   - **Cons**: 
     - Can be inefficient if frequently modified as it reconstructs the entire text node.

3. **`innerText`**:
   - **Benchmark Definition**: `a.innerText += 'text';`
   - **Description**: Similar to `textContent`, this property retrieves or sets the visible text of `a` while taking into account the CSS styles.
   - **Pros**: 
     - Reflects what the user sees on the page, accounting for styles (like hidden text).
   - **Cons**: 
     - Often less performant than `textContent` as it requires layout recalculations to ensure the visibility of text, and may not accurately reflect HTML content.

4. **`innerHTML`**:
   - **Benchmark Definition**: `a.innerHTML += 'text';`
   - **Description**: This property gets or sets the HTML markup contained within the element.
   - **Pros**: 
     - Can handle complex HTML structures and allows for inserting HTML elements.
   - **Cons**: 
     - Security risks related to XSS if the content includes user input.
     - Can be significantly slower as it necessitates re-parsing the HTML and potentially re-rendering parts of the DOM.

### Performance Results:

From the benchmark results provided:
- `createTextNode` outperformed all other methods, with an impressive execution rate of approximately **1,039,538 executions per second**.
- `textContent` came next at around **33.15 executions per second**, followed closely by `innerText` at **26.95 executions per second**.
- `innerHTML` performed the worst, with only **1.78 executions per second**, highlighting its inefficiency for simple text additions.

### Other Considerations:

- **Use Case**: The choice of method largely depends on the specific requirements. If only text needs to be added, `createTextNode` or `textContent` would be preferable. If HTML structures are needed, `innerHTML` is the option, despite its performance drawbacks.
  
- **Security**: When dealing with user-generated content, always prefer `textContent` or `createTextNode` to avoid security issues associated with `innerHTML`.

- **Cross-Browser Behavior**: While these methods generally behave consistently across modern browsers, nuances can exist in older browsers or less common environments.

### Alternates:
Some alternatives to consider when manipulating the DOM in modern web applications include:
- **Document Fragments**: Useful for batch updates to the DOM to optimize performance and reduce reflows.
- **Frameworks/Libraries**: Tools like React, Vue.js, or jQuery simplify DOM manipulation and ensure efficient updates, leveraging virtual DOM patterns or efficient rendering strategies.
- **Custom Elements/Web Components**: Encapsulating functionality can lead to more manageable and reusable code, reducing the need for direct DOM manipulations.

Related benchmarks:

createTextNode vs textContent vs innerText vs innerHTML (+ version) (version: 1)

Comparing performance of: createTextNode vs textContent vs innerText vs innerHTML

Created: 2 months 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 gpt-4o-mini, generated 2 months ago):