Benchmark: DOM: Best practices for creating, then adding elements

DOM: Best practices for creating, then adding elements (version: 3)

Comparing performance of: With createElement() and append() vs With createElement() and appendChild() vs With innerHTML and getElementById() vs With innerHTML and getElementsByClassName() vs With innerHTML and getElementsByTagName() vs With innerHTML and querySelector() vs With innerHTML and querySelectorAll() vs With createElement() and outerHTML vs With innerHTML and children[children.length - 1] vs With innerHTML and lastChild vs With innerHTML and lastElementChild vs With createElement() and innerHTML

Created: one year ago by: Registered User

Jump to the latest result

HTML Preparation code:

<body></body>

Tests:

With createElement() and append()
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.append(canvas);
With createElement() and appendChild()
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.appendChild(canvas);
With innerHTML and getElementById()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.getElementById("canvas");
With innerHTML and getElementsByClassName()
document.body.innerHTML = "<canvas class='canvas'></canvas>"; const canvas = document.getElementsByClassName("canvas")[0];
With innerHTML and getElementsByTagName()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.getElementsByTagName("canvas")[0];
With innerHTML and querySelector()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.querySelector("canvas");
With innerHTML and querySelectorAll()
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.querySelectorAll("canvas")[0];
With createElement() and outerHTML
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.innerHTML = canvas.outerHTML;
With innerHTML and children[children.length - 1]
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.children[document.body.children.length - 1];
With innerHTML and lastChild
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.lastChild;
With innerHTML and lastElementChild
document.body.innerHTML = "<canvas id='canvas'></canvas>"; const canvas = document.body.lastElementChild;
With createElement() and innerHTML
const canvas = document.createElement("canvas"); canvas.id = "canvas"; document.body.innerHTML = "<canvas id='canvas'></canvas>";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With createElement() and append()
With createElement() and appendChild()
With innerHTML and getElementById()
With innerHTML and getElementsByClassName()
With innerHTML and getElementsByTagName()
With innerHTML and querySelector()
With innerHTML and querySelectorAll()
With createElement() and outerHTML
With innerHTML and children[children.length - 1]
With innerHTML and lastChild
With innerHTML and lastElementChild
With createElement() and innerHTML

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Browser/OS: Firefox 106 on Windows

View result in a separate tab

Test name	Executions per second
With createElement() and append()	701.9 Ops/sec
With createElement() and appendChild()	252.4 Ops/sec
With innerHTML and getElementById()	542786.3 Ops/sec
With innerHTML and getElementsByClassName()	476435.9 Ops/sec
With innerHTML and getElementsByTagName()	453142.8 Ops/sec
With innerHTML and querySelector()	462701.3 Ops/sec
With innerHTML and querySelectorAll()	387011.9 Ops/sec
With createElement() and outerHTML	330630.1 Ops/sec
With innerHTML and children[children.length - 1]	414557.2 Ops/sec
With innerHTML and lastChild	520841.1 Ops/sec
With innerHTML and lastElementChild	524433.1 Ops/sec
With createElement() and innerHTML	394358.5 Ops/sec

DOM: Best practices for creating, then adding elements (version: 3)

Created: one year ago by: Registered User

Jump to the latest result

With createElement() and append()

With createElement() and appendChild()

With innerHTML and getElementById()

With innerHTML and getElementsByClassName()

With innerHTML and getElementsByTagName()

With innerHTML and querySelector()

With innerHTML and querySelectorAll()

With createElement() and outerHTML

With innerHTML and children[children.length - 1]

With innerHTML and lastChild

With innerHTML and lastElementChild

With createElement() and innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A