Sylvain Mathieu

jQuery Create DOM nodes - Benchmarking

With jQuery classic functions

The benchmarked function :

$("<li/>")
   .attr("id","contactid")
   .append(
       $("<span/>")
            .addClass("baseinfo")
            .append(
                $("<span/>")
                    .addClass("fullname")
                    .text("John Doe")
            )
            .append("(")
            .append(
                $("<a/>")
                    .attr("href", "#")
                    .text("john@doe.com")
                    .click(function(){alert("test");})
            )
            .append(")")
            .append(
                $("<span/>")
                    .addClass("company")
                    .text("company: World Company")
                )
    )
    .append(
        $("<div/>")
            .addClass("moreinfo")
            .append(
                $("<div/>")
                    .append(
                        $("<div/>")
                            .addClass("join")
                            .text("phone: 123-555-12345")
                    )
                    .append(
                        $("<div/>")
                            .addClass("location")
                            .text("Location: NY")
                    )
                    .append(
                        $("<div/>")
                            .addClass("notes")
                            .text("Notes: OK")
                    )
                    .append(
                        $("<div/>")
                            .addClass("clearboth")
                    )
            )
    )
   .appendTo("#appendWithJquery-list");

Show the result

Run time for 100 calls with jQuery functions :

With jQuery Create DOM nodes

The benchmarked function :

$._li({"contactid":""})
       ._span({"class":"baseinfo"})
        ._span_().addClass("fullname").text("John Doe")
          ._append_("(")
        ._a_({"href":"#"}).text("coucou").click(function(){alert("test");})
        ._append_(")")
        ._span_({"class":"company"}).text("company: World Company")
    .span_()
    ._div({"class":"moreinfo"})
        ._div_({"class":"join"}).text("phone: 123-555-12345")
        ._div_({"class":"location"}).text("Location: NY")
        ._div_({"class":"notes"}).text("Notes: OK")
        ._div_({"class":"clearboth"})
    .div_()
.li_()
.appendTo("#appendWithCreateNode-list");

Show the result

Run time for 100 calls with jQuery Create DOM nodes :

The ratio (Create DOM nodes plugin / jQuery classic functions) is :