jQuery pattern for DOM building (from strings)?

eli at media.berkeley.edu eli at media.berkeley.edu
Wed Sep 10 21:52:21 UTC 2008

I think that the pattern you want is this:

    // build some HTML into a jquery object
    var someDOM = $("<div><span>" +
        "This is a div with a click on it." +

    // bind events to elements, note the (element, container) syntax
    $("span", someDOM).click(function(){

    // append the new object into the body

By the way, I know it seems totally clunky and unprogrammery. But it's
often easier and almost always more performant to build HTML as strings
and then inject it into the DOM.

Did I _get_ the question?

- Eli

> Hi folks,
> I can't think of a more qualified group to offer insight here.  When
> doing some modular DOM building, I hit an interesting jQuery thing.
> Specifically, I'm building up small chunks of DOM (from string) and
> returning them where they are being dropped in a larger chunk of DOM,
> etc.  I'm wondering if I'm what I'm doing is halfway clean, naive, or
> ill-advised.
> It's roughly like a decorator pattern.  What I'm running into is
> that, when I build up a given DOM chunk, it's at the top level in the
> jQuery object.  This forces me to make a decision between find() and
> filter() to attach events and so on.  It also makes append() / after
> () seem a little flaky.  So, I hacked it...
> My simple hack around this has been to start with something like var
> dom = $('<div></div>'); and then doing append()s to that.  I can then
> do find() unconditionally, but I end up returning dom.children().
> Included p.s. is a contrived example of my technique, with respectful
> nods to Steve G.
> Does anyone have any particular opinion about this?  Are the Fluid
> components handling this in some super elegant way?
> Also, can someone advise about the warning about escaping slashes in
> strings going to DOM/jQuery objects: $('...markup...')? http://
> docs.jquery.com/Core/jQuery#jQuery.28.C2.A0html_.29
> Thanks,
> -Noah
> $(document).ready(function() { $('body').append(buildPanel
> ('awesome!')); });
> function buildPanel(someParam) {
>    var dom = $('<div></div>');
>    dom.append('<div class="awesomePanel"></div>');
>    dom.find('div.awesomePanel').append(buildTitleBar());
>    var awesomeData = {};  //go get some awesome data based on someParam
>    dom.find('div.awesomePanel').append(buildPanelBody(awesomeData));
>    return dom.children();
> }
> function buildTitleBar() {
>    var dom = $('<div></div>');
>    dom.append('<div class="awesomeTitle"></div>');
>    dom.find('div.awesomeTitle').hover(...);
>    return dom.children();
> }
> function buildPanelBody(data) {
>    var dom = $('<div></div>');
>    //make a table of the awesome data
>    dom.append('<table class="awesomeTable">...</table>');
>    return dom.children();
> }
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work

More information about the fluid-work mailing list