Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs insertAdjacentHTML vs append vs insertAdjacentElement
(version: 0)
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement
Comparing performance of:
1) innerHTML += vs 2) insertAdjacentHTML vs 3) append vs 4) insertAdjacentElement vs appendChild
Created:
3 years ago
by:
Guest
Jump to the latest result
Tests:
1) innerHTML +=
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.innerHTML += box2HTML;
2) insertAdjacentHTML
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.insertAdjacentHTML('beforeend', box1.outerHTML); box3.insertAdjacentHTML('beforeend', box2.outerHTML);
3) append
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.append(box1, box2);
4) insertAdjacentElement
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.insertAdjacentElement('beforeend', box1); box3.insertAdjacentElement('beforeend', box2);
appendChild
const box1 = document.createElement("div"); const box2 = document.createElement("div"); const box2HTML = `${box1.outerHTML}${box2.outerHTML}`; const box3 = document.createElement("div"); box3.appendChild(box1); box3.appendChild(box2);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
1) innerHTML +=
2) insertAdjacentHTML
3) append
4) insertAdjacentElement
appendChild
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 world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark. **Benchmark Definition** The benchmark is designed to compare four different methods for inserting HTML content into an element: 1. `innerHTML` 2. `insertAdjacentHTML` 3. `append` 4. `insertAdjacentElement` These methods are used to insert or append HTML elements to a DOM document, and their performance can vary depending on the browser, device, and operating system. **Options Compared** Each test case compares two different methods: * `innerHTML +` vs `insertAdjacentHTML` * `append` vs `insertAdjacentElement` The benchmark measures the execution time for each method, allowing users to compare their performance. **Pros and Cons of Each Approach** Here's a brief overview of each approach: 1. **innerHTML**: This method sets the HTML content directly on the element using the `innerHTML` property. It can be slow because it involves parsing the HTML and updating the element's DOM tree. 2. **insertAdjacentHTML**: This method uses the `insertAdjacentHTML` method, which is a more modern approach that allows for efficient insertion of HTML content into the DOM. It's faster than `innerHTML` but still requires parsing the HTML. 3. **append**: This method uses the `appendChild` method to add a new element to the end of the DOM document. While it's generally faster than `innerHTML`, it can be slower than `insertAdjacentHTML` if the child element is complex or contains many attributes. 4. **insertAdjacentElement**: Similar to `append`, this method uses the `insertAdjacentElement` method, which is more efficient when working with a single element. However, it's not as widely supported as `appendChild`. **Library and Purpose** In some test cases, the benchmark uses the `outerHTML` property of elements, which returns the HTML content of an element as a string. The `outerHTML` property is useful for creating a copy of an element's HTML content without modifying its DOM tree. However, it can be slow because it involves parsing the HTML and generating a new string representation. **Special JS Feature or Syntax** None of the test cases use any special JavaScript features or syntax that would require additional explanation. **Other Alternatives** If you're interested in exploring other alternatives, here are some additional methods you could consider: * `createElement` + `appendChild`: This approach involves creating a new element using the `createElement` method and then appending it to the DOM document. * `innerHTML` with attribute manipulation: Some browsers support manipulating HTML attributes directly on an element's `innerHTML`. However, this is not widely supported and can be slow due to the parsing requirements. Keep in mind that these alternatives may not provide a significant performance difference from the methods being compared in the benchmark.
Related benchmarks:
createTextNode vs innerHTML vs innerText
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
Comments
Confirm delete:
Do you really want to delete benchmark?