Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createTextNode vs textContent vs innerText vs append vs new Text
(version: 0)
Comparing performance of:
createTextNode vs textContent vs innerText vs append vs new text
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var a = document.createElement('a');
Tests:
createTextNode
a.appendChild(document.createTextNode('text'));
textContent
a.textContent = 'text';
innerText
a.innerText = 'text';
append
a.append('text');
new text
a.appendChild(new Text('text'));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
createTextNode
textContent
innerText
append
new text
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
14 days ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0
Browser/OS:
Firefox 151 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
createTextNode
2371033.5 Ops/sec
textContent
3381388.0 Ops/sec
innerText
2230741.5 Ops/sec
append
4046191.5 Ops/sec
new text
2954412.8 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided benchmark compares the performance of six different approaches to set and retrieve text content on an HTML element: `createTextNode`, `textContent`, `innerText`, `append`, `new Text`, and `appendChild`. The goal is to determine which approach is fastest, most efficient, and reliable. **Options Compared** 1. **`createTextNode`**: Creates a new text node using the `document.createTextNode()` method. 2. **`textContent`**: Sets the text content of an element using the `element.textContent` property. 3. **`innerText`**: Sets the inner text of an element using the `element.innerText` property (available in HTML5). 4. **`append`**: Appends a string to the end of an element's content using the `element.append()` method (not a standard DOM method, but rather a custom implementation). 5. **`new Text`**: Creates a new text node using the `Text` constructor. 6. **`appendChild`**: Appends a child node to an element using the `element.appendChild()` method. **Pros and Cons** 1. **`createTextNode`**: * Pros: Creates a new, separate text node, which can be beneficial for SEO and accessibility. * Cons: May incur additional overhead due to the creation of a new node. 2. **`textContent`**: * Pros: Fast and efficient, as it uses the element's internal text storage. * Cons: Limited control over the text node's behavior (e.g., no way to set its attributes). 3. **`innerText`**: * Pros: Similar to `textContent`, but with better support for HTML5 elements. * Cons: Not available in older browsers or IE. 4. **`append`**: * Pros: Custom implementation can provide additional features or optimizations. * Cons: Non-standard method, which may not be supported by all browsers or environments. 5. **`new Text`**: * Pros: Creates a new, separate text node with full control over its attributes. * Cons: May incur additional overhead due to the creation of a new node. 6. **`appendChild`**: * Pros: Allows for more flexibility and control over the text node's behavior. * Cons: May be slower than other methods due to the need to create a child node. **Library Usage** The `new Text` method uses the `Text` constructor, which is a built-in JavaScript class. The purpose of this library is to provide a way to create a new text node with custom attributes and behavior. **Special JS Features or Syntax** None mentioned in the provided benchmark definition. **Other Alternatives** Other approaches to set and retrieve text content include: 1. **`innerHTML`**: Sets the HTML content of an element using the `element.innerHTML` property. However, this method is not recommended due to security concerns (e.g., potential XSS attacks). 2. **`createElementText`**: A proprietary method used by some older browsers or environments to create a new text node. Keep in mind that these alternatives may have different performance characteristics, pros and cons, and are not recommended for use in modern web development.
Related benchmarks:
createTextNode vs textContent vs innerText
createTextNode vs innerHTML vs innerText
createTextNode vs textContent vs innerText vs append
createTextNode vs textContent vs innerText vs innerHTML
Comments
Confirm delete:
Do you really want to delete benchmark?