MeasureThat.net

Run results for: Clear Element content v4

Howto clear Element Content

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0
Chrome 126
Windows
Desktop
9 months ago
Test name Executions per second
innerHTML 2066941.0 Ops/sec
replaceChildren 2109725.5 Ops/sec
remove firstChild 2936671.2 Ops/sec
remove lastChild 2941773.5 Ops/sec
textContent 1962089.1 Ops/sec
remove and recreate root element 188694.5 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="container"></div>
Script Preparation code:
 
const container = document.querySelector('#container');
for (let i=0; i<300; i++) 
  container.appendChild(document.createElement('p'));
Tests:

  • innerHTML

     
    container.innerHTML ='';

  • replaceChildren

     
    container.replaceChildren()

  • remove firstChild

     
    while (container.firstChild)
      container.removeChild(container.firstChild)

  • remove lastChild

     
    while (container.lastChild)
      container.removeChild(container.lastChild)

  • textContent

     
    container.textContent=''

  • remove and recreate root element

     
    const clone = container.cloneNode(false);
    container.parentNode.replaceChild(clone, container);