Testing HTML inserting or multiple id inserting jquery

Benchmark created by Philip on

Description

build a html string with data in js or use static html and insert data based on IDs

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="placeholder01">
</div>
<div id="placeholder02">
  <div id="1">
  </div>
  <div id="2">
  </div>
  <div id="3">
  </div>
  <div id="4">
  </div>
  <div id="5">
  </div>
  <div id="6">
  </div>
  <div id="7">
  </div>
  <div id="8">
  </div>
  <div id="9">
  </div>
</div>
<script>
  var html = $(document.createElement('div')).attr('id', 'buurt_details_right');
  
  var data1 = "data 01",
      data2 = "data 02",
      data3 = "data 03",
      data4 = "data 04",
      data5 = "data 05",
      data6 = "data 06",
      data7 = "data 07",
      data8 = "data 08",
      data9 = "data 09";
  
  html.append('<div id="i1">' + data1 + '</div>' + '<div id="i2">' + data2 + '</div>' + '<div id="i3">' + data3 + '</div>' + '<div id="i4">' + data4 + '</div>' + '<div id="i5">' + data5 + '</div>' + '<div id="i6">' + data6 + '</div>' + '<div id="i7">' + data7 + '</div>' + '<div id="i8">' + data8 + '</div>' + '<div id="i9">' + data9 + '</div>');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
complete html parse
$("#placeholder01").append($(html));
ready
Individual div html
$("#i2").html(data1);
$("#i1").html(data2);
$("#i3").html(data3);
$("#i4").html(data4);
$("#i5").html(data5);
$("#i6").html(data6);
$("#i7").html(data7);
$("#i8").html(data8);
$("#i9").html(data9);
ready

Revisions

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