Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerText vs createTextNode
(version: 0)
Test which might be faster when using a fragement.
Comparing performance of:
innerText vs createTextNode
Created:
6 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<div id="container"></div>
Script Preparation code:
var fragment = document.createDocumentFragment(); var text = 'Text node';
Tests:
innerText
var el = document.createElement('span'); el.innerText = text; fragment.appendChild(el);
createTextNode
const content = document.createTextNode(text) fragment.appendChild(content)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerText
createTextNode
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the provided benchmark. **What is being tested?** MeasureThat.net is testing which approach is faster for creating and appending text nodes to a `documentFragment` in JavaScript. The test compares two methods: setting the `innerText` property of an element directly, and creating a new `Text` node using the `document.createTextNode()` method. **Options compared:** 1. **innerText**: This method sets the text content of an existing element (in this case, a newly created `<span>` element) directly. 2. **createTextNode**: This method creates a new `Text` node and appends it to the `fragment`. **Pros and Cons:** * **innerText**: + Pros: This approach is often more convenient and easier to read, as it doesn't require creating a separate text node object. + Cons: The browser may optimize this approach by reusing the existing element, which can lead to slower performance in certain cases. * **createTextNode**: + Pros: This approach creates a new, dedicated text node that is not shared with any other element. This can improve performance, especially when working with large amounts of text data. + Cons: This approach requires creating an additional object and appending it to the fragment, which may introduce overhead. **Library and purpose:** * `document.createDocumentFragment()`: This method creates a new, lightweight DOM node that can be used as a container for other elements. The purpose is to improve performance by reducing the number of nodes in the document tree. * `document.createTextNode(text)`: This method creates a new text node with the specified content. **Special JS feature or syntax:** None mentioned in this benchmark. However, it's worth noting that some browsers may optimize certain DOM operations using features like CSSOM (CSS Object Model) and DOM APIs. **Other alternatives:** In addition to the two methods being tested, other approaches for creating text nodes include: * Using a `Text` node as a child of another element, like a `<div>` or `<span>`. * Creating an HTML string using a template engine or regular expressions, and then appending it to the fragment. * Using a library like jQuery or React that provides optimized text node creation and manipulation APIs. Keep in mind that the best approach for your specific use case will depend on factors like performance requirements, code readability, and browser compatibility.
Related benchmarks:
createTextNode vs textContent vs innerText
createTextNode vs innerHTML vs innerText
createTextNode vs cloneNode asdf
innerText vs insertAdjacentText
createTextNode vs textContent vs innerText vs innerHTML (for reading)
Comments
Confirm delete:
Do you really want to delete benchmark?