Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
insertAdjacentHTML with outerHTML vs append with CloneNode vs appendChild
(version: 0)
Comparing performance of:
append vs insertAdjacentHTML vs appendChild
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
append
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement.cloneNode(true));
insertAdjacentHTML
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").insertAdjacentHTML("beforeend", newElement.outerHTML);
appendChild
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").appendChild(newElement.cloneNode(true));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
append
insertAdjacentHTML
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/133.0.0.0 Safari/537.36
Browser/OS:
Chrome 133 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=593413" width="100%" height="500px"></iframe>
append
476/s
appendChild
447/s
insertAdjacentHTML
447/s
View exact numbers
Test name
Executions per second
✓
append
476 Ops/sec
appendChild
447 Ops/sec
insertAdjacentHTML
447 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its test cases. **Benchmark Definition** The benchmark is defined as a JSON object with three properties: * `Name`: The name of the benchmark, which in this case is "insertAdjacentHTML with outerHTML vs append with CloneNode vs appendChild". * `Description`: An empty string, indicating that no additional description is provided for this benchmark. * `Script Preparation Code` and `Html Preparation Code`: These properties are not used in this benchmark. The HTML preparation code is a simple `<div>` element with an ID of "test". **Test Cases** There are three test cases defined: 1. **append** * The script preparation code creates a new `div` element, sets its `id` attribute, and appends 1000 instances of another `div` element to it. * The `append` method is used to add the cloned node (`newElement.cloneNode(true)`) to the `test` element using `document.getElementById("test").append()`. 2. **insertAdjacentHTML** * The script preparation code creates a new `div` element, sets its `id` attribute, and appends 1000 instances of another `div` element to it. * The `insertAdjacentHTML` method is used with the `beforeend` argument to insert the outer HTML of the cloned node (`newElement.outerHTML`) into the `test` element using `document.getElementById("test").insertAdjacentHTML("beforeend", newElement.outerHTML)`. 3. **appendChild** * The script preparation code creates a new `div` element, sets its `id` attribute, and appends 1000 instances of another `div` element to it. * The `appendChild` method is used to add the cloned node (`newElement.cloneNode(true)`) to the `test` element using `document.getElementById("test").appendChild()`. **Options Compared** The three test cases compare the performance of: 1. `append`: Using the `append` method to add nodes to an element. 2. `insertAdjacentHTML`: Using the `insertAdjacentHTML` method with the `beforeend` argument to insert HTML into an element. 3. `appendChild`: Using the `appendChild` method to add nodes to an element. **Pros and Cons of Each Approach** 1. **append** * Pros: + Simple and straightforward. + Works well for adding multiple nodes to an element in a single operation. * Cons: + Can be slower than other methods due to the need to traverse the DOM tree when inserting new nodes. 2. **insertAdjacentHTML** * Pros: + Faster than `append` because it allows for more direct manipulation of the DOM tree. + Supports a wide range of HTML elements and attributes. * Cons: + Can be less intuitive to use, especially for complex HTML structures. 3. **appendChild** * Pros: + Similar performance characteristics to `insertAdjacentHTML`. + Easier to understand and implement than `insertAdjacentHTML`. * Cons: + Less flexible than `insertAdjacentHTML`. **Library: CloneNode** The `CloneNode` method is used in all three test cases. It creates a shallow copy of the original element, allowing for efficient manipulation of node contents. **Special JS Feature/Syntax** None mentioned.
Related benchmarks
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement
createTextNode vs textContent vs innerText vs append vs innerHTML vs insertAdjacentHTMLvs replaceChildren vs appendChild
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2
insertAdjacentHtml vs innerHTML (no initial contents)
Comments
Confirm delete:
Do you really want to delete benchmark?