Run results for: createElement + append vs html code

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser: Firefox 131

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

createElement

11K/s

html code

6K/s

View exact numbers

Test name	Executions per second
✓ createElement	10,750 Ops/sec
html code	6,408 Ops/sec

HTML Preparation code:

<div id="fakeInput" contenteditable> </div>

Tests:

html code
//document.getElementById('fakeInput').innerHTML = '<img class="emoji" src="/sy2/images/message/emoji/22.svg">'; document.getElementById('fakeInput').innerHTML = '123456';
createElement
//var child = document.createElement('img'); //child.setAttribute('class', 'emoji'); //child.setAttribute('src', '/sy2/images/message/emoji/20.svg'); //document.getElementById('fakeInput').appendChild(child); var child = document.createTextNode('123456'); document.getElementById('fakeInput').appendChild(child);