jQuery append with class and with method addClass() (v6)

Revision 6 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="foo">
  FOO
</div>
<div id="bar">
  BAR
</div>
<div id="baz">
  BAZ
</div>
<div id="foobar">
  FOOBAR
</div>

Setup

var foo = $("#foo");
    var bar = $("#bar");
    var baz = $("#baz");
    var foobar = $("#foobar");
    var counterS = 0;
    var counterM = 0;
    var counterS2 = 0;
    var counterS3 = 0;
    var viaString, viaMethod, viaString2, viaString3;

Test runner

Ready to run.

Testing in
TestOps/sec
Add DIV with class via string
viaString = $('<div class="foo-' + counterS + '" />');
foo.append(viaString);
counterS++;
ready
Add DIV with class via method
viaMethod = $("<div>").addClass("foo-" + counterM);
bar.append(viaMethod);
counterM++;
ready
using $("<div>", {"class":foo})
viaString2 = $('<div>', {
  "class": "foo-" + counterS2
});
baz.append(viaString2);
counterS2++;
ready
using '<div class="foo-' + counterS + '" />'
viaString3 = '<div class="foo-' + counterS + '" />';
foobar.append(viaString3);
counterS2++;
ready

Revisions

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