Run results for: createElement vs innerHTML vs innerHTML (polling) x 300

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Browser: Chrome 128

Operating system: Windows

Device Platform: Desktop

Date tested: 3 months ago

HTML Preparation code:

<div class='x'></div>

Tests:

createElement
let fragment = new DocumentFragment(); for (let i = 0; i < 300; i++) { fragment.appendChild(document.createElement("div")); } document.querySelector(".x").append(fragment);
innerHTML
let fragment = ""; for (let i = 0; i < 300; i++) { fragment += "<div></div>"; } document.querySelector(".x").innerHTML = fragment;
innerHTML (polling)
for (let i = 0; i < 300; i++) { document.querySelector(".x").innerHTML += "<div></div>"; }