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

Test name	Executions per second
✓ With innerHTML and getElementById()	80,814 Ops/sec
With innerHTML and lastChild	80,355 Ops/sec
With innerHTML and lastElementChild	77,864 Ops/sec
With innerHTML and getElementsByTagName()	77,459 Ops/sec
With innerHTML and querySelector()	77,210 Ops/sec
With innerHTML and getElementsByClassName()	74,097 Ops/sec
With innerHTML and children[children.length - 1]	69,530 Ops/sec
With innerHTML and querySelectorAll()	68,396 Ops/sec
With createElement() and innerHTML	68,205 Ops/sec
With createElement() and outerHTML	66,977 Ops/sec
With createElement() and append()	1,275 Ops/sec
With createElement() and appendChild()	559 Ops/sec

Test name

Executions per second

✓ With innerHTML and getElementById()

80,814 Ops/sec

With innerHTML and lastChild

80,355 Ops/sec

With innerHTML and lastElementChild

77,864 Ops/sec

With innerHTML and getElementsByTagName()

77,459 Ops/sec

With innerHTML and querySelector()

77,210 Ops/sec

With innerHTML and getElementsByClassName()

74,097 Ops/sec

With innerHTML and children[children.length - 1]

69,530 Ops/sec

With innerHTML and querySelectorAll()

68,396 Ops/sec

With createElement() and innerHTML

68,205 Ops/sec

With createElement() and outerHTML

66,977 Ops/sec

With createElement() and append()

1,275 Ops/sec

With createElement() and appendChild()

559 Ops/sec

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