Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
createElement + append vs html code
(version: 1)
Benchmark.js
Comparing performance of:
html code vs createElement
Created:
6 years ago
by:
Registered User
Go to the latest result
HTML Preparation code:
<div id="fakeInput" contenteditable> </div>
Tests:
html code
//document.getElementById('fakeInput').innerHTML = '<img class="emoji" src="/sy2/images/message/emoji/22.svg">'; document.getElementById('fakeInput').innerHTML = '123456';
createElement
//var child = document.createElement('img'); //child.setAttribute('class', 'emoji'); //child.setAttribute('src', '/sy2/images/message/emoji/20.svg'); //document.getElementById('fakeInput').appendChild(child); var child = document.createTextNode('123456'); document.getElementById('fakeInput').appendChild(child);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
html code
createElement
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0
Browser/OS:
Firefox 131 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=560155" width="100%" height="500px"></iframe>
createElement
11K/s
html code
6K/s
View exact numbers
Test name
Executions per second
✓
createElement
10,750 Ops/sec
html code
6,408 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark definition and test cases to explain what's being tested, compared, and their pros/cons. **Benchmark Definition** The benchmark is defined by two test cases: 1. "createElement" 2. "html code" The script preparation code is empty, indicating that it's not used in this benchmark. The HTML preparation code sets up a `<div>` element with an ID of "fakeInput" and makes its content editable. **Test Cases** #### 1. "createElement" ```javascript //var child = document.createElement('img'); // Create an img tag //child.setAttribute('class', 'emoji'); // Set the class attribute of the img tag //child.setAttribute('src', '/sy2/images/message/emoji/20.svg'); // Set the src attribute of the img tag //document.getElementById('fakeInput').appendChild(child); // Append the img tag to the fakeInput div var child = document.createTextNode('123456'); // Create a text node with the string "123456" document.getElementById('fakeInput').appendChild(child); // Append the text node to the fakeInput div ``` **Comparison** In this test case, two approaches are compared: a. Creating an `img` element and appending it to the DOM. b. Creating a `textNode` with a string value and appending it to the DOM. **Pros/Cons:** Creating an `img` element is more verbose than creating a `textNode`, but it can be useful if you need to add additional attributes or styles to the image element. On the other hand, creating a `textNode` is faster because it doesn't involve parsing HTML and setting up a new element. #### 2. "html code" The benchmark definition uses the following script preparation code: ```javascript //document.getElementById('fakeInput').innerHTML = '<img class=\"emoji\" src=\"/sy2/images/message/emoji/22.svg\">'; // Set the innerHTML of the fakeInput div to an img tag document.getElementById('fakeInput').innerHTML = '123456'; // Set the innerHTML of the fakeInput div to a string ``` **Comparison** In this test case, two approaches are compared: a. Setting the `innerHTML` property of the `div` element directly. b. Creating an `img` element and then appending it to the DOM. However, in modern browsers, using `innerHTML` can be slower than other methods because it involves parsing HTML and creating a new document fragment. **Pros/Cons:** Using `innerHTML` is simpler and more concise but may be slower due to parsing overhead. Creating an `img` element and appending it to the DOM is more verbose but might be faster for some use cases. **Libraries Used** None. **Special JS Features/Syntax** This benchmark doesn't use any special JavaScript features or syntax. It only uses standard DOM methods and properties. **Alternatives** Other alternatives for creating elements in JavaScript include: * Using a library like React, Angular, or Vue.js to manage the DOM. * Using a virtual DOM like Preact or SolidJS. * Using a templating engine like Handlebars or Mustache. * Using a library like jQuery to simplify DOM manipulation. Keep in mind that each alternative has its own trade-offs and use cases. The benchmark is designed to compare simple DOM operations, so the alternatives might not be as relevant for this specific scenario.
Related benchmarks
createElement vs cloneNode from DOM
insertAdjacentHtml vs createContextualFragment
insertAdjacentHtml vs innerHTML (no initial contents)
Comments
Confirm delete:
Do you really want to delete benchmark?