MeasureThat.net

Run results for: createElement vs cloneNode vs innerHTML for multi elements

Faster way to create new dom elements before insertion

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; rv:106.0) Gecko/20100101 Firefox/106.0
Firefox 106
Windows
Desktop
2 years ago
Test name Executions per second
createElement 2.5 Ops/sec
cloneNode (deep) 9.9 Ops/sec
innerHTML 3.7 Ops/sec
Tests:

  • createElement

    AخA
     
    const list = [];
    let n = 0;
    while(true) {
        n++;
        const div = document.createElement('div');
        const div2 = document.createElement('div');
        const div3 = document.createElement('div');
        const p = document.createElement('p');
        div2.classList.add('two');
        div3.classList.add('three');
        p.classList.add('font-bold');
        p.textContent = 'Hello!';
        div.appendChild(div2);
        div2.appendChild(div3);
        div3.appendChild(p);
        list.push(div);
        if(n===100000) 
            break;
    }

  • cloneNode (deep)

     
    const list = [];
    let n = 0;
        const div = document.createElement('div');
        const div2 = document.createElement('div');
        const div3 = document.createElement('div');
        const p = document.createElement('p');
        p.classList.add('font-bold');
        p.textContent = 'Hello!';
        div.appendChild(div2);
        div2.appendChild(div3);
        div3.appendChild(p);
    while(true) {
        n++;
        list.push(div.cloneNode(true));
        if(n===100000) 
            break;
    }

  • innerHTML

     
    const list = [];
    let n = 0;
    while(true) {
        n++;
        const div = document.createElement('div');
        div.innerHTML = '<div class="two"><div class="three"><p class="font-bold">Hello!</p></div></div>';
        list.push(div);
        if(n===100000) 
            break;
    }