Test name | Executions per second |
---|---|
innerHTML | 56391.5 Ops/sec |
insertAdjacentHTML with remove | 710.2 Ops/sec |
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 );
document.getElementById( 'target' ).innerHTML = `
<div>
<span>Child 4</span>
</div>
`;
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>
` );