Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs insertAdjacentHTML but actually works Foregon
(version: 0)
Comparing performance of:
createElement vs insertAdjacentHTML
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
createElement
const madeFavoriteEffectHtml = () => { const parent = document.createElement('div') parent.setAttribute('class', 'c-favorite-effect') /** * Circle Left Top */ const circleLeftTopLeft = document.createElement('div'), circleLeftTopRight = document.createElement('div'), circleLeftTopCenter = document.createElement('div') circleLeftTopLeft.setAttribute('class', 'c-favorite-effect--circle is-pos--left-top-left') circleLeftTopCenter.setAttribute('class', 'c-favorite-effect--circle is-pos--left-top-center') circleLeftTopRight.setAttribute('class', 'c-favorite-effect--circle is-pos--left-top-right') parent.appendChild(circleLeftTopLeft) parent.appendChild(circleLeftTopCenter) parent.appendChild(circleLeftTopRight) /** * Circle Right Top */ const circleRightTopLeft = document.createElement('div'), circleRightTopCenter = document.createElement('div'), circleRightTopRight = document.createElement('div') circleRightTopLeft.setAttribute('class', 'c-favorite-effect--circle is-pos--right-top-left') circleRightTopCenter.setAttribute('class', 'c-favorite-effect--circle is-pos--right-top-center') circleRightTopRight.setAttribute('class', 'c-favorite-effect--circle is-pos--right-top-right') parent.appendChild(circleRightTopLeft) parent.appendChild(circleRightTopCenter) parent.appendChild(circleRightTopRight) /** * Circle Left Bottom */ const circleLeftBottomLeft = document.createElement('div'), circleLeftBottomCenter = document.createElement('div'), circleLeftBottomRight = document.createElement('div') circleLeftBottomLeft.setAttribute('class', 'c-favorite-effect--circle is-pos--left-bottom-left') circleLeftBottomCenter.setAttribute('class', 'c-favorite-effect--circle is-pos--left-bottom-center') circleLeftBottomRight.setAttribute('class', 'c-favorite-effect--circle is-pos--left-bottom-right') parent.appendChild(circleLeftBottomLeft) parent.appendChild(circleLeftBottomCenter) parent.appendChild(circleLeftBottomRight) /** * Circle Right Bottom */ const circleRightBottomLeft = document.createElement('div'), circleRightBottomCenter = document.createElement('div'), circleRightBottomRight = document.createElement('div') circleRightBottomLeft.setAttribute('class', 'c-favorite-effect--circle is-pos--right-bottom-left') circleRightBottomCenter.setAttribute('class', 'c-favorite-effect--circle is-pos--right-bottom-center') circleRightBottomRight.setAttribute('class', 'c-favorite-effect--circle is-pos--right-bottom-right') parent.appendChild(circleRightBottomLeft) parent.appendChild(circleRightBottomCenter) parent.appendChild(circleRightBottomRight) return parent } let effect = madeFavoriteEffectHtml() document.getElementById('test').append(effect)
insertAdjacentHTML
const madeFavoriteEffectHtml = () => { const parent = document.createElement('div') parent.setAttribute('class', 'c-favorite-effect') parent.insertAdjacentHTML('beforeend', ` <div class="c-favorite-effect--circle is-pos--left-top-left"></div> <div class="c-favorite-effect--circle is-pos--left-top-center"></div> <div class="c-favorite-effect--circle is-pos--left-top-right"></div> <div class="c-favorite-effect--circle is-pos--right-top-left"></div> <div class="c-favorite-effect--circle is-pos--right-top-center"></div> <div class="c-favorite-effect--circle is-pos--right-top-right"></div> <div class="c-favorite-effect--circle is-pos--left-bottom-left"></div> <div class="c-favorite-effect--circle is-pos--left-bottom-center"></div> <div class="c-favorite-effect--circle is-pos--left-bottom-right"></div> <div class="c-favorite-effect--circle is-pos--right-bottom-left"></div> <div class="c-favorite-effect--circle is-pos--right-bottom-center"></div> <div class="c-favorite-effect--circle is-pos--right-bottom-right"></div> `) return parent } let effect = madeFavoriteEffectHtml() document.getElementById('test').append(effect)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
insertAdjacentHTML
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 benchmark being tested on MeasureThat.net. The test case measures the performance of two approaches to create HTML elements: `createElement` and `insertAdjacentHTML`. **What are they comparing?** The comparison is between creating individual HTML elements using `createElement` versus inserting multiple HTML elements at once using `insertAdjacentHTML`. The latter approach uses a template string with placeholders for each element, which is then replaced with the actual element HTML. **Options being compared:** 1. **createElement**: Creates individual HTML elements from scratch. 2. **insertAdjacentHTML**: Inserts multiple HTML elements into an existing container without creating them first. **Pros and Cons of each approach:** **createElement:** Pros: * More control over the element's attributes, styles, and events. * Can be more efficient if you need to create a large number of similar elements. Cons: * Requires more DOM manipulation (appending/inserting children), which can lead to slower performance. * May result in additional overhead due to garbage collection. **insertAdjacentHTML:** Pros: * Faster because it avoids unnecessary DOM manipulation. * Can be more efficient for inserting multiple elements at once. Cons: * Less control over the element's attributes, styles, and events. * May not work well with complex or dynamic content. **Other considerations:** * Both approaches assume that the container element already exists in the DOM. If the container is created using `createElement`, you'll need to ensure it's properly initialized before inserting elements using either approach. * The test case doesn't account for browser-specific quirks, such as differences in caching or parsing of HTML templates. **Library used:** None, this benchmark only uses built-in JavaScript DOM APIs (`document.createElement` and `insertAdjacentHTML`). **Special JS feature or syntax:** This benchmark doesn't use any special JavaScript features or syntax beyond standard DOM API usage. **Benchmark preparation code:** The test case provides a basic HTML template with an empty container element (`<div id="test"></div>`), which is used as the target for inserting elements using `insertAdjacentHTML`. The actual implementation of `createElement` and `insertAdjacentHTML` functions is not shown in this example. **Latest benchmark result:** The latest results show that Chrome 89, running on a Linux desktop platform, favors the `createElement` approach with an execution rate of 22456.953125 elements per second, compared to 18231.21875 elements per second for `insertAdjacentHTML`. However, it's essential to note that these results may not be representative of all browsers or use cases.
Related benchmarks:
createElement vs insertAdjacentHTML but actually works
createElement vs insertAdjacentHTML but actually works V2
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElementasd
DOM Parser vs insertAdjacentHTML simple
insertAdjacentHtml vs innerHTML (no initial contents)
Comments
Confirm delete:
Do you really want to delete benchmark?