Run results for: insertAdjacentHTML vs appendchild vs append(3)

Run details:

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

Browser: Firefox 103

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
insertAdjacentHTML	5729.9 Ops/sec
appendchild	37272.2 Ops/sec
append	34735.1 Ops/sec
insertAdjacentHTML [separately]	4254.1 Ops/sec

HTML Preparation code:

<div id="case"></div>

Tests:

insertAdjacentHTML
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="" class="pics__image js-pics__image" src="" ><div class="pics__panel"><h2 class="pics__title"></h2><p class="pics__text"></p></div></a>' let newElement = ''; for (i = 0; i < 30; i++) { newElement += testNodeHtml; } cont.insertAdjacentHTML("beforeend", newElement);
appendchild
const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); const testNode = item; const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.appendChild(testNode) }
append
const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); const testNode = item; const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.append(testNode) }
insertAdjacentHTML [separately]
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="" class="pics__image js-pics__image" src="" ><div class="pics__panel"><h2 class="pics__title"></h2><p class="pics__text"></p></div></a>' let newElement = ''; for (i = 0; i < 30; i++) { cont.insertAdjacentHTML("beforeend", testNodeHtml); }

Run results for: insertAdjacentHTML vs appendchild vs append(3)

insertAdjacentHTML

appendchild

append

insertAdjacentHTML [separately]