Benchmark: createTextNode vs textContent vs innerText vs append vs innerHTML vs insertAdjacentHTMLvs replaceChildren vs appendChild

Script Preparation code:

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

Tests:

createTextNode
span.appendChild(document.createTextNode('Hello, World! 🥺'));
textContent
span.textContent = 'Hello, World! 🥺';
innerText
span.innerText = 'Hello, World! 🥺';
append
span.append('Hello, World! 🥺');
innerHTML
span.innerHTML = 'Hello, World! 🥺';
insertAdjacentHTML
span.insertAdjacentHTML("beforeend", 'Hello, World! 🥺');
replaceChildren
span.replaceChildren('Hello, World! 🥺');
appendChild
span.appendChild(new Text('Hello, World! 🥺'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTextNode
textContent
innerText
append
innerHTML
insertAdjacentHTML
replaceChildren
appendChild

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; SM-N975F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 112 on Android

View result in a separate tab

Test name	Executions per second
createTextNode	747638.2 Ops/sec
textContent	3236471.2 Ops/sec
innerText	905634.4 Ops/sec
append	1315452.8 Ops/sec
innerHTML	101070.6 Ops/sec
insertAdjacentHTML	127221.7 Ops/sec
replaceChildren	1107428.5 Ops/sec
appendChild	652476.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmark test on MeasureThat.net, which compares the performance of different approaches for creating or manipulating text content in HTML elements.

**What is tested?**

The benchmark tests the following approaches:

1. `createTextNode`: Creates a new text node using the `document.createTextNode()` method.
2. `textContent`: Sets the text content of an element using the `textContent` property.
3. `innerText`: Sets the inner text of an element using the `innerText` property (which is not supported in all browsers, but used here for consistency).
4. `append`: Appends a string to the end of an element's content using the `append()` method.
5. `innerHTML`: Sets the HTML content of an element using the `innerHTML` property.
6. `insertAdjacentHTML`: Inserts HTML content into an element at a specified position using the `insertAdjacentHTML()` method.
7. `replaceChildren`: Replaces the entire content of an element with new content using the `replaceChildren()` method.
8. `appendChild`: Appends a child node to the end of an element's children using the `appendChild()` method.

**Options compared:**

Each approach is compared against others in terms of performance, specifically the number of executions per second.

**Pros and cons:**

Here are some pros and cons for each approach:

1. `createTextNode`:
	* Pros: Fast, efficient way to create a new text node.
	* Cons: May not be supported by older browsers or versions.
2. `textContent`:
	* Pros: Fast, widely supported, and easy to use.
	* Cons: Does not allow for fine-grained control over HTML structure.
3. `innerText`:
	* Pros: Easy to use, widely supported (though not all browsers support it).
	* Cons: May not be as efficient as other methods, and can lead to security issues if not used carefully.
4. `append`:
	* Pros: Simple and easy to use, but may have performance implications.
	* Cons: Can be slower than other methods due to the need to create a new DOM element.
5. `innerHTML`:
	* Pros: Easy to use, widely supported.
	* Cons: May be slower than other methods due to the overhead of parsing HTML strings.
6. `insertAdjacentHTML`:
	* Pros: Fast and efficient way to insert HTML content.
	* Cons: Requires precise control over the insertion position and may not support all browsers.
7. `replaceChildren`:
	* Pros: Can be fast, but requires careful consideration of the DOM tree structure.
	* Cons: May have performance implications due to the need to update the entire DOM tree.

**Other considerations:**

When choosing a method for creating or manipulating text content in HTML elements, consider factors such as:

* Browser support: Make sure the chosen method is supported by all target browsers.
* Performance: Choose methods that balance speed with other requirements (e.g., security, maintainability).
* Security: Be aware of potential security risks associated with certain methods, especially when using `innerText`.

**Alternatives:**

Other alternatives to these approaches include:

1. Using a template engine like Handlebars or Mustache to generate HTML content.
2. Utilizing a library like DOMPurify to sanitize user-generated content.
3. Employing server-side rendering techniques to pre-render HTML templates.

Keep in mind that the choice of method depends on the specific requirements and constraints of your project, such as performance, security, and maintainability.

Related benchmarks:

createTextNode vs textContent vs innerText vs append vs innerHTML vs insertAdjacentHTMLvs replaceChildren vs appendChild (version: 0)

Comparing performance of: createTextNode vs textContent vs innerText vs append vs innerHTML vs insertAdjacentHTML vs replaceChildren vs appendChild

Created: one year ago by: Guest

Jump to the latest result

createTextNode

textContent

innerText

append

innerHTML

insertAdjacentHTML

replaceChildren

appendChild

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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