Run results for: DOM: Best practices for creating, then adding elements

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Browser: Firefox 130

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
With createElement() and append()	1275.3 Ops/sec
With createElement() and appendChild()	558.7 Ops/sec
With innerHTML and getElementById()	80813.7 Ops/sec
With innerHTML and getElementsByClassName()	74097.3 Ops/sec
With innerHTML and getElementsByTagName()	77459.3 Ops/sec
With innerHTML and querySelector()	77210.5 Ops/sec
With innerHTML and querySelectorAll()	68396.0 Ops/sec
With createElement() and outerHTML	66976.9 Ops/sec
With innerHTML and children[children.length - 1]	69529.8 Ops/sec
With innerHTML and lastChild	80354.9 Ops/sec
With innerHTML and lastElementChild	77864.2 Ops/sec
With createElement() and innerHTML	68205.0 Ops/sec

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>";

Run results for: DOM: Best practices for creating, then adding elements

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