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: 9 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Browser/OS: Chrome 140 on Linux

View result in a separate tab

append

9.0M/s

appendChild

8.0M/s

innerText

7.2M/s

textContent

7.0M/s

createTextNode

7.0M/s

replaceChildren

6.6M/s

insertAdjacentHTML

2.9M/s

innerHTML

2.4M/s

View exact numbers

Test name	Executions per second
✓ append	8,958,654 Ops/sec
appendChild	7,975,078 Ops/sec
innerText	7,218,508 Ops/sec
textContent	7,018,640 Ops/sec
createTextNode	6,995,784 Ops/sec
replaceChildren	6,560,778 Ops/sec
insertAdjacentHTML	2,875,250 Ops/sec
innerHTML	2,424,138 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 3 years ago by: Guest

Go to the latest result

createTextNode

textContent

innerText

append

innerHTML

insertAdjacentHTML

replaceChildren

appendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 3 years ago by: Guest

Go to the latest result

createTextNode

textContent

innerText

append

innerHTML

insertAdjacentHTML

replaceChildren

appendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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