Run results for: insertAdjacentHTML vs append cloneNode

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

append cloneNode

7/s

insertAdjacentHTML

3/s

View exact numbers

Test name	Executions per second
✓ append cloneNode	7 Ops/sec
insertAdjacentHTML	3 Ops/sec

HTML Preparation code:

<form id='test'></form>

Tests:

append cloneNode
const htmlStrg = `<fieldset class='grid-container'><div class='cell'><input type='date' name='date' class='input input-date'></div></fieldset>` const parsedHTML = new DOMParser().parseFromString(htmlStrg, 'text/html').body.firstChild const form = document.getElementById('test') for (let i = 0; i < 200; i++) { form.appendChild(parsedHTML.cloneNode(true)) }
insertAdjacentHTML
const htmlStrg = `<fieldset class='grid-container'><div class='cell'><input type='date' name='date' class='input input-date'></div></fieldset>` const form = document.getElementById('test') for (let i = 0; i < 200; i++) { form.insertAdjacentHTML('beforeend', htmlStrg) }