MeasureThat.net

 innerhtml vs removechild vs removeChildre vs remove vs innerText vs textContent (version: 0)

Comparing performance of: innerHTML vs removeChild vs remove vs innerText vs textContent vs removeChildren

Created: 5 months ago by: Guest
Jump to the latest result
HTML Preparation code:
AخA
 
1
<div id="container"></div>
Script Preparation code:
​x
 
var node = document.getElementById('container');
​
for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));
Tests:

  • innerHTML

     
    var node = document.getElementById('container');
    node.innerHTML = '';

  • removeChild

     
    var node = document.getElementById('container');
    while(node.firstChild) node.removeChild(node.firstChild)

  • remove

     
    var node = document.getElementById('container');
    while(node.firstChild) node.firstChild.remove()

  • innerText

     
    var node = document.getElementById('container');
    node.innerText = '';

  • textContent

     
    var node = document.getElementById('container');
    node.textContent = '';

  • removeChildren

     
    var node = document.getElementById('container');
    node.removeChildren()
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    innerHTML
    removeChild
    remove
    innerText
    textContent
    removeChildren

    Fastest: N/A

    Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!