Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
insertAdjacentHTML vs appendchild vs append(4)
(version: 0)
Comparing performance of:
insertAdjacentHTML vs appendchild vs append [separately] vs insertAdjacentHTML [separately] vs append
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="case"></div>
Tests:
insertAdjacentHTML
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="" class="pics__image js-pics__image" src="" ><div class="pics__panel"><h2 class="pics__title"></h2><p class="pics__text"></p></div></a>' let newElement = ''; for (i = 0; i < 30; i++) { newElement += testNodeHtml; } cont.insertAdjacentHTML("beforeend", newElement);
appendchild
function createNode() { const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); return item } const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.appendChild(createNode()) }
append [separately]
function createNode() { const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); return item } const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.append(createNode()) }
insertAdjacentHTML [separately]
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="" class="pics__image js-pics__image" src="" ><div class="pics__panel"><h2 class="pics__title"></h2><p class="pics__text"></p></div></a>' let newElement = ''; for (i = 0; i < 30; i++) { cont.insertAdjacentHTML("beforeend", testNodeHtml); }
append
function createNode() { const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); return item } const cont = document.querySelector("#case"); const testNodes = []; for (i = 0; i < 30; i++) { testNodes.push(createNode()) } cont.append(...testNodes)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
insertAdjacentHTML
appendchild
append [separately]
insertAdjacentHTML [separately]
append
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):
Measuring the performance of JavaScript methods can be quite insightful. **What is being tested?** The benchmark tests four different ways to append or insert HTML elements into an existing DOM element: 1. `insertAdjacentHTML`: Inserts an HTML string at a specified position within an element. 2. `appendChild`: Appends a child element to the end of an element. 3. `append` (separately): Creates a new element, appends it to the target element using the `append()` method, and then assigns it to a variable. 4. `insertAdjacentHTML [separately]`: Similar to `insertAdjacentHTML`, but creates multiple elements first before inserting them. **Comparison of options** Here's a brief overview of each approach: * **`insertAdjacentHTML`**: This method is faster than the other three because it can bypass DOM mutations, which are slow. However, it requires the HTML string to be in scope. * **`appendChild`**: This method is slower than `insertAdjacentHTML` but still relatively fast. It creates a new element and then appends it to the target element. * **`append [separately]`**: This approach is slower than the other two because it creates a new element, assigns it to a variable, and then appends it to the target element. This introduces unnecessary object creation and assignment. * **`insertAdjacentHTML [separately]`**: Similar to `append [separately]`, but uses `insertAdjacentHTML` to insert multiple elements. **Performance implications** The results show that `insertAdjacentHTML` is significantly faster than the other three options. This is because it can bypass DOM mutations, which are slow. The `appendChild` method is slower than `insertAdjacentHTML` but still relatively fast. The `append [separately]` and `insertAdjacentHTML [separately]` approaches are slower due to the unnecessary object creation and assignment. **Best practices** Based on these results, here are some best practices: * Use `insertAdjacentHTML` when inserting HTML strings into an element. * Avoid using `appendChild` if you can use `insertAdjacentHTML`. * Avoid creating multiple elements using a loop and then appending them to the target element. Instead, create all elements at once and insert them using `insertAdjacentHTML [separately]`. I hope this explanation helps!
Related benchmarks:
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement
JS: insertBefore vs appendChild vs prepend vs insertAdjacentElement vs after
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElementasd
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2
insertAdjacentHtml vs innerHTML (no initial contents)
Comments
Confirm delete:
Do you really want to delete benchmark?