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

Revision 4 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"
/>
<script id="divTemplate" type="text/x-jquery-tmpl">
  < div class = "foo-${variable}" / >
</script>
<div id="foo">
  FOO
</div>
<div id="bar">
  BAR
</div>
<div id="template">
  Hello World!
</div>

Setup

var foo = $("#foo");
    var bar = $("#bar");
    var destination = $("#template");
    var counterS = 0;
    $.template("divTemplate", '<div class = "foo-${variable}" />');

Teardown


    counterS = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
Add DIV with class via string
var div = $('<div class="foo-' + counterS + '" />');
foo.append(div);
counterS++;
ready
Add DIV with class via method
var div = $("<div/>");
div.addClass("foo-" + counterS);
bar.append(div);
counterS++;
ready
add via template
$.tmpl("divTemplate", {
  variable: counterS
}).appendTo(destination);
counterS++;
ready

Revisions

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