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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
Chrome 135
Windows
Desktop
12 days ago
Test name Executions per second
createElement 541.3 Ops/sec
innerHTML 1.6 Ops/sec
innerHTML append 2165.0 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 = '';