Run results for: appendChild v. insertAdjacentHTML

Run details:

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

Browser: Firefox 112

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
appendChild	4257.5 Ops/sec
appendChild 2	1876.1 Ops/sec
appendChild 3	1733.5 Ops/sec
insertAdjacentHTML	1497.9 Ops/sec

HTML Preparation code:

<div><div><div></div></div></div>
<div></div>
<a href='#' />
<div></div>
<div></div>
<div><div><div></div></div></div>
<div></div>
<div><div></div></div>
<div><div></div></div>
<div><div><div><div></div></div></div></div>
<div></div>
<div></div>

Script Preparation code:

for(let i of [Document,DocumentFragment,Element]){
	i.prototype.$=i.prototype.querySelector;
	i.prototype.$$=function(s){return[...this.querySelectorAll(s)]};
}

Tests:

appendChild
class UI { constructor(doc){ this.#dlg = doc.body.appendChild(doc.createElement('dialog')); this.#dlg.id = 'dlg'; this.#dlg.className = 'fit'; this.#img = this.#dlg.appendChild(new Image()); } #dlg; #img; } const ui = new UI(document);
appendChild 2
class UI { constructor(doc){ this.#dlg = doc.body.appendChild(doc.createElement('dialog')); this.#dlg.id = 'dlg'; this.#dlg.className = 'fit'; this.#img = this.#dlg.appendChild(document.createElement('img')); } #dlg; #img; } const ui = new UI(document);
appendChild 3
class UI { constructor(doc){ this.#dlg = doc.body.appendChild(Object.assign(doc.createElement('dialog'),{id:'dlg',className:'fit'})); this.#img = this.#dlg.appendChild(new Image()); } #dlg; #img; } const ui = new UI(document);
insertAdjacentHTML
class UI { constructor(doc){ doc.body.insertAdjacentHTML('beforeend',`<dialog id="dlg" class="fit"><img></dialog>`); this.#dlg = doc.body.$('#dlg'); this.#img = this.#dlg.$('img'); } #dlg; #img; } const ui = new UI(document);

Run results for: appendChild v. insertAdjacentHTML

appendChild

appendChild 2

appendChild 3

insertAdjacentHTML