MeasureThat.net

Run results for: createElement vs innerHTML for creating elements in DOM

Speed of inserting DOM elements by various methods

Go to the benchmark
Run details:
Mozilla/5.0 (Linux; Android 11; Redmi Note 9S) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36
Chrome Mobile 109
Android
Mobile
2 years ago
Test name Executions per second
createElement 96.9 Ops/sec
innerHTML 0.3 Ops/sec
innerHTML append 395.8 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="container"></div>
Tests:

  • createElement

    ​x
     
    const container = document.getElementById('container');
    container.innerHTML = '';
    ​
    for (let i = 0; i < 1000; i++) {
        const div = document.createElement('div');
        const p = document.createElement('d');
        p.classList.add('font-bold');
        p.textContent = 'Hello'+i+'!';
        div.appendChild(p);
        container.appendChild(div);
    }
    /*cleanup*/
    container.innerHTML = '';

  • innerHTML

     
    const container = document.getElementById('container');
    container.innerHTML = '';
    ​
    for (let i = 0; i < 1000; i++) {
        container.innerHTML += '<div><p class="font-bold">Hello'+i+'!</p></div>';
    }
    /*cleanup*/
    container.innerHTML = '';

  • innerHTML append

     
    const container = document.getElementById('container');
    container.innerHTML = '';
    ​
    for (let i = 0; i < 1000; i++) {
        container.append('<div><p class="font-bold">Hello'+i+'!</p></div>');
    }
    /*cleanup*/
    container.innerHTML = '';