Sylvain Mathieu

jQuery Create DOM Nodes Plugin overview

In a plain ajax web application, we often need to create DOM nodes or DOM trees in javascript. However I think that creating a node with the classic jQuery's functions is really unproductive.

That's why I have created this plugin to simplify the DOM nodes or node trees creation in JavaScript.

Download

You can download the latest release here : jquery.createdomnodes.js.

A Basic example

If you need to create a simple node like this :

<div id="thepopup" class="popup">
    <h1>A title</h1>
    <p class="centered">
        A paragraph
        <br />blahblah
    </p>
</div>

In jQuery, and with a chaining style, you should write something like this :

$(context).append(
    $("<div/>")
        .addClass("popup")
        .attr("id","thepopup")
        .append(
            $("<h1/>")
                .text("A title")
        )
        .append(
            $("<p/>")
                .addClass("centered")
                .text("A paragraph")
                .append("<br/>")
                .append("blahblah")
        )
);

With jQuery Create DOM Nodes plugin you can write this :

$(context)
    ._div()
        .addClass("popup")
        .attr("id","thepopup")
        ._h1_()
            .text("A title")
        ._p()
            .addClass("centered")
            .text("A paragraph")
            ._br_()
            ._append_("blahblah")
        .p_()
    .div_();

As you can see this syntax looks like xhtml syntax :

• _div() represente a <div> tag
• div_() represente a </div> tag
• _div_() represente a <div/> tag

For your information, "div" can be replaced by all the xhtml 1.0 tags. But if you want to use another tag, you can use the generic *tag*() functions :

$(context)
    ._tag("div")
        .addClass("popup")
        .attr("id","thepopup")
        ._tag_("h1")
            .addClass("centered")
            .text("A title")
        ._tag("article")
            .text("A paragraph")
            ._br_()
            ._append_("blahblah")
        .tag_()
    .tag_();

About the attributes definition, you can have a more compact syntax by putting them on a node with the json syntax :

$(context)
    ._div({"id": "thepopup", "class": "popup"})
        ._h1_().text("A title")
        ._p({"class":"centered"}).text("A paragraph")
            ._br_()
            ._append_("blahblah")
        .p_()
    .div_();

A more complex example

If you need to create complex list like that :

<ul id="teamlist">
    <li>
        <div class="maininfo">
            John
            <span class="lastname">Doe</span>
            (
            <a href="mailto:john.doe@mail.com">john.doe@mail.com</a>
            )
        </div>
        <div class="moreinfo">
            Project manager
        </div>
    </li>
</ul>

You can decide to manage this list only with javascript. So you should create a function to append a li node in the ul node with jQuery.

var TeamList = {

    // Templating
    addNode: function(member) {
        $._li()
            ._div({"class": "maininfo"})
                ._append_(member.firstname)
                ._span_({"class": "lastname"}).text(member.lastname)
                ._append_("(")
                ._a_().text(member.email).click(TeamList.onMailClick)
                ._append_(")")
            .div_()
            ._div_({"class": "moreinfo"}).text(member.infos)
        .li_()
        .appendTo("#teamlist");
    },

    // Events
    onMailClick: function () {
        MailPopup.open(); // We can imagine this way.
    },

    // Initializations
    init: function() {
        TeamList.addNode({
            firstname: "John",
            lastname: "Doe",
            email: "john.doe@mail.com",
            infos: "Project manager"
        });
    }

};

$(document).init(TeamList.init);

As you can see it's possible to handle an event with classic jQuery function. In this example, the click() binds a "click" event on this element.

About performances

I think performance is an important issue. Indeed, to create a node with jQuery functions is relatively slow and if we need to pop many nodes or a big node tree, it can take 1 second or more. That's why I tried to optimize this point.

I build a benchmark page to compare the classic jQuery functions with jQuery Create DOM Node Plugin. Launch the benchmark