Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Bench InnerHTML vs CreateElement + AppendChild
(version: 0)
Bench InnerHTML vs CreateElement + AppendChild
Comparing performance of:
InnerHTML vs CreateElement + AppendChild
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='container'></div>
Tests:
InnerHTML
const container = document.getElementById('container') container.innerHTML = '<span>I did it Mom !</span>'
CreateElement + AppendChild
const container = document.getElementById('container') const span = document.createElement('span') span.textContent = 'I did it Mom !' container.appendChild(span)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
InnerHTML
CreateElement + AppendChild
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Browser/OS:
Chrome 128 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=554275" width="100%" height="500px"></iframe>
InnerHTML
586K/s
CreateElement + AppendChild
406K/s
View exact numbers
Test name
Executions per second
✓
InnerHTML
586,156 Ops/sec
CreateElement + AppendChild
405,709 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of measuring JavaScript performance. **Benchmark Purpose** The provided benchmark measures the performance difference between two approaches for setting inner HTML in an HTML element: `innerHTML` and creating an element using `createElement` followed by appending it to the container. This is a common optimization problem, as creating and manipulating elements can be expensive in terms of performance. **Options Compared** Two options are compared: 1. **InnerHTML**: Using the `innerHTML` property to set the content of an HTML element. 2. **CreateElement + AppendChild**: Creating an element using the `createElement` method and then appending it to the container using the `appendChild` method. **Pros and Cons of Each Approach** **InnerHTML** Pros: * Faster, as it's a single operation that sets the content directly in the DOM. * Less memory allocation and deallocation, which can lead to better performance. Cons: * May not be compatible with older browsers or environments that don't support `innerHTML`. * Can lead to more complex error handling if the element doesn't exist or is not properly initialized. **CreateElement + AppendChild** Pros: * More flexible, as it allows for custom element creation and manipulation. * Can be used in situations where `innerHTML` is not available or supported. Cons: * Slower, as it involves creating a new element and appending it to the container. * More memory allocation and deallocation, which can lead to poorer performance. **Library Usage** In this benchmark, no specific library is used. However, some libraries like jQuery or React might use similar approaches for setting inner HTML or manipulating elements. **Special JS Feature/Syntax** There's a special syntax being tested: `const container = document.getElementById('container')\r\ncontainer.innerHTML = '<span>I did it Mom !</span>'`. The `\r\n` escape sequence is used to create a newline character, which can affect the performance of some browsers. **Benchmark Preparation Code and Test Cases** The benchmark preparation code is minimal, consisting only of creating an HTML element with an ID `container`. The test cases define two scenarios: 1. **InnerHTML**: Sets the inner HTML of the container using the `innerHTML` property. 2. **CreateElement + AppendChild**: Creates a new span element, sets its text content, and appends it to the container using `appendChild`. **Benchmark Results** The latest benchmark results show that Chrome 128 on Windows Desktop outperforms the alternative approach in terms of executions per second: * **InnerHTML**: 586155.9375 executions per second * **CreateElement + AppendChild**: 405708.53125 executions per second Keep in mind that these numbers are specific to this benchmark and might not be representative of other scenarios or browsers. **Other Alternatives** If you're looking for alternative approaches, consider the following: 1. **Use a Virtual DOM library**: Libraries like React or Vue.js can help with efficient DOM manipulation by using a virtual DOM representation. 2. **Use a templating engine**: Engines like Handlebars or Mustache can help with generating HTML content efficiently. 3. **Optimize inner HTML usage**: Consider caching the result of `innerHTML` calls to avoid repeated DOM lookups. Remember that performance optimization should always be tailored to your specific use case and requirements.
Related benchmarks
createTextNode vs innerHTML vs innerText
append vs appendChild + createTextNode
JS: append vs appendChild
JS: insertBefore vs appendChild
ParentNode.append() vs Node.appendChild() for adding a couple elements
Comments
Confirm delete:
Do you really want to delete benchmark?