insertAdjacentHtml with remove vs innerHTML

insertAdjacentHtml with remove vs innerHTML
5 months ago
User agent: Mozilla/5.0 (Android 13; Mobile; rv:128.0) Gecko/128.0 Firefox/128.0
Test name Executions per second
innerHTML 56391.5 Ops/sec
insertAdjacentHTML with remove 710.2 Ops/sec
Script Preparation code:
x
 
const targetElem = document.createElement( 'DIV' );
targetElem.id = 'target';
targetElem.innerHTML = `
    <div>
        <span>Child 1</span>
    </div>
    <div>
        <span>Child 2</span>
    </div>
    <div>
        <span>Child 3</span>
    </div>
`;
document.body.appendChild( targetElem );
Tests:
  • innerHTML

     
    document.getElementById( 'target' ).innerHTML = `
        <div>
            <span>Child 4</span>
        </div>
    `;
  • insertAdjacentHTML with remove

     
    const t = document.getElementById( 'target' );
    const l = t.children.length;
    for (let i = 0; i < l; i++) {
      t.children[i].remove();
    }
    t.insertAdjacentHTML( 'afterbegin', `
        <div>
            <span>Child 4</span>
        </div>
    ` );
Open this result on MeasureThat.net