Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
jsperfwasmuchmorecomfortable
(version: 0)
...
Comparing performance of:
A - innerHTML vs B - insertAdjacentHTML vs C - createElement
Created:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
const targetElem = document.createElement( 'DIV' ); targetElem.id = 'target'; targetElem.innerHTML = ` <div> <span>Child 1</span> </div> <div> <span>Child 2</span> </div> <div> <span>Child 3</span> </div> `; document.body.appendChild( targetElem );
Tests:
A - innerHTML
document.getElementById( 'target' ).innerHTML += ` <div> <span>Child 4</span> </div> `;
B - insertAdjacentHTML
document.getElementById( 'target' ).insertAdjacentHTML( 'beforeend', ` <div> <span>Child 4</span> </div> `);
C - createElement
const newChild = document.createElement( 'DIV' ); const newChildChild = document.createElement( 'SPAN' ); newChildChild.innerHTML = 'Child 4'; newChild.appendChild( newChildChild ); document.getElementById( 'target' ).appendChild( newChild );
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
A - innerHTML
B - insertAdjacentHTML
C - createElement
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 break down the provided JSON data for MeasureThat.net. **Benchmark Definition** The benchmark is designed to compare three different approaches for adding child elements to an HTML element. The `Script Preparation Code` section creates a target HTML element and appends existing child elements using the `innerHTML` property, while the `Html Preparation Code` section is empty. This means that only the script preparation code is executed before running each test case. **Test Cases** There are three test cases: 1. **A - innerHTML**: This test case compares adding a new child element to an existing HTML string using the `innerHTML` property. 2. **B - insertAdjacentHTML**: This test case compares adding a new child element to an existing HTML element using the `insertAdjacentHTML` method. 3. **C - createElement**: This test case compares creating a new child element from scratch and appending it to another element. **Pros and Cons of each approach** 1. **innerHTML**: * Pros: Simple, easy to use, and widely supported. * Cons: Can lead to security issues if user-controlled input is used, as it can execute arbitrary JavaScript code. 2. **insertAdjacentHTML**: * Pros: More secure than `innerHTML`, as it doesn't execute arbitrary JavaScript code, and can be more efficient for large strings. * Cons: Requires a DOM element reference (in this case, the target element), which can add complexity to the code. 3. **createElement**: * Pros: Creates a new element without modifying an existing one, which can be beneficial for performance or security reasons. * Cons: Requires more code and can be slower than using `innerHTML` or `insertAdjacentHTML`. **Libraries and special features** None of the test cases use any libraries. However, it's worth noting that `insertAdjacentHTML` is a part of the HTML5 specification, which may not be supported in older browsers. No special JavaScript features are used in these test cases. **Alternatives** Other alternatives for adding child elements to an HTML element include: * Using a template engine like Handlebars or Mustache * Creating a new element using a library like React or Angular * Using the `textContent` property instead of `innerHTML` * Using a custom solution with DOM manipulation (e.g., creating a new node and appending it to the target element) These alternatives may offer different trade-offs in terms of performance, security, and complexity.
Related benchmarks:
insertAdjacentHtml vs innerHTML
innerHTML vs replaceChildren + insertAdjacentHTML
insertAdjacentHtml with remove vs innerHTML
innerHTML vs textContent v2
Comments
Confirm delete:
Do you really want to delete benchmark?