change html by js

Benchmark created by magic on

Preparation HTML

<div id="box1">
  <div id="box2">
    1
  </div>
  <div id="box3">
    2
  </div>
  <div id="box4">
    3
  </div>
  <div id="box5">
    4
  </div>
  <div id="box6">
    5
  </div>
  <div id="box7">
    6
  </div>
  <div id="box8">
    7
  </div>
  <div id="box9">
    8
  </div>
</div>

Setup

var i = 1;

Teardown


    i = i + 1;

Test runner

Ready to run.

Testing in
TestOps/sec
change every div
document.getElementById("box2").innerHTML = i;
document.getElementById("box3").innerHTML = i;
document.getElementById("box4").innerHTML = i;
document.getElementById("box5").innerHTML = i;
document.getElementById("box6").innerHTML = i;
document.getElementById("box7").innerHTML = i;
document.getElementById("box8").innerHTML = i;
document.getElementById("box9").innerHTML = i;
ready
hide and change
document.getElementById("box1").style.visibility = "hidden";
document.getElementById("box2").innerHTML = i;
document.getElementById("box3").innerHTML = i;
document.getElementById("box4").innerHTML = i;
document.getElementById("box5").innerHTML = i;
document.getElementById("box6").innerHTML = i;
document.getElementById("box7").innerHTML = i;
document.getElementById("box8").innerHTML = i;
document.getElementById("box9").innerHTML = i;
document.getElementById("box1").style.visibility = "visible";
ready
rewrite it
document.getElementById("box1").innerHTML = '<div id="box2">' + i + '</div><div id="box3">' + i + '</div><div id="box4">' + i + '</div><div id="box5">' + i + '</div><div id="box6">' + i + '</div><div id="box7">' + i + '</div><div id="box8">' + i + '</div><div id="box9">' + i + '</div>';
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by magic on