Benchmark: createElement vs cloneNode from DOM

HTML Preparation code:

<div class='container'>
  <div>
    <a href="#">link</a>
  </div>
</div>

<div id="appendedItems"></div>

Tests:

createElement
var itemsContainer = document.getElementById('appendedItems'); for (i=0; i < 10000; i++) { var fragment = document.createDocumentFragment(); var container = document.createElement('div'); container.className = 'container'; var div = document.createElement('div'); var a = document.createElement('a'); var aTextNode = document.createTextNode('link'); a.href = '#'; a.appendChild(aTextNode); div.appendChild(a); container.appendChild(div); fragment.appendChild(container); itemsContainer.appendChild(fragment); }
cloneNode
var itemsContainer = document.getElementById('appendedItems'); var container = document.querySelector('.container'); for (i=0; i < 10000; i++) { var fragment = document.createDocumentFragment(); var cloned = container.cloneNode(true); var a = cloned.querySelector('a'); a.href = '##'; a.textContent = 'newLink'; fragment.appendChild(cloned); itemsContainer.appendChild(fragment); }

Rendered benchmark preparation results:

Previous results

Test case name	Result
createElement
cloneNode

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 128 on Windows

Test name	Executions per second
createElement	10.1 Ops/sec
cloneNode	11.4 Ops/sec

Related benchmarks:

createElement vs cloneNode from DOM (version: 0)