Run results for: Generate HTML and get reference to element : DOMParser + querySelectorAll vs document.createElement

Run details:

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

Browser: Chrome 104

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
DOMParser + querySelectorAll	12046.6 Ops/sec
document.createElement	97692.9 Ops/sec

Tests:

DOMParser + querySelectorAll
let x = `<div class="wrapper"> <h1>Some title</h1> <p id="custom_1"></p> <span id="custom_2"></span> </div> <div>other</div>` let domp = new DOMParser(); let frag = document.createDocumentFragment(); let x_document = domp.parseFromString(x, 'text/html'); let ids = x_document.querySelectorAll("[id]"); let controller = {} for (let element of ids) { controller[element.getAttribute('id')] = element; } let nb_child = x_document.body.childNodes.length; let childNodes = x_document.body.childNodes; for (let i = 0; i < nb_child; i++) { frag.appendChild(childNodes[0]); }
document.createElement
let wrapper = document.createElement('div'); wrapper.classList.add('wrapper'); let h1 = document.createElement('h1') h1.textContent = 'Some title'; let p = document.createElement('p'); let span = document.createElement('span') let div = document.createElement('div'); div.textContent = 'other'; let frag = document.createDocumentFragment(); wrapper.append(h1,p,span); frag.append(wrapper, div); let controller = { custom_1: p, custom_2: span }