DO.dom: Creating large DOM structures in Javascript

Question

I have the library that I have found to be very useful when creating dynamic content rich web applications. I call it DO.js. It allows me to create entire DOM structures inside of Javascript in a similar manner that HTML markup should look. Additionally, it does it all without writing any HTML strings. It uses a hierarchy of embedded functions and objects to create the DOM structure. Please see my site below for examples.

My question is, is this a good way of doing this? I can and I have (the website below is created in this fashion) created whole websites using this method. I made it so that I could easily load and display large amounts of data pulled via ajax and where each bit of data will have events and variables attached. Of course, this is hard and tacky to do using normal HTML.

I kinda created documentation for it. However, I am not very good with documentation(or writing in general.)

What should/could be done better? What would be the best programming practices in this case? Anykind of critique would be awesome.

Thanks

http://hurdevan.com/#!Home/Projects/DO.js

Please note that the website does not work at all in IE due to a Hashbang.js bug. And, I don't care about IE.

Code Examples:

Simple Example

with(DO.dom)
   {
   div({parentElement:document.body},
       span(b('Hello World!'))
        );
   }

An example using events and such:

var win = {};
with(DO.dom)
    {
    win.root = div({parentElement:document.body,style:'border:1px solid black;width:200px;height:200px;position:fixed;'},
        win.bar = div({style:'height:20px;text-align:center;background-color:#333333;color:white;cursor:pointer;',
            onmousedown:DO.Func(true,function(eve,winobj)
                {
                window.onmousemove = winobj.bar.onmousemove;
                window.onmouseup = winobj.bar.onmouseup;
                winobj.offsetX = winobj.root.offsetLeft - eve.x;
                winobj.offsetY = winobj.root.offsetTop - eve.y;
                winobj.activeDrag = true;
                },win),
            onmouseup:DO.Func(true,function(eve,winobj)
                {
                window.onmousemove = false;
                window.onmouseup = false;
                winobj.activeDrag = false;
                },win),
            onmousemove:DO.Func(true,function(eve,winobj)
                {
                if(!winobj.activeDrag)return false;
                winobj.root.style.position="fixed";
                winobj.root.style.left = (eve.x + winobj.offsetX)+"px";
                winobj.root.style.top = (eve.y + winobj.offsetY)+"px";
                },win)
            },'Move Window'),


        win.body = div(
            div(b('First Name:'),
                win.firstName = input({type:'text'})
                ),
            div(b('Last Name:'),
                win.lastName = input({type:'text'})
                ),
            div(b('Email:'),
                win.email = input({type:'text'})
                ),
                input({type:'submit',onclick:DO.Func(function(winobj)
                {
                alert("First Name:"+winobj.firstName.value +"\n"+"Last Name:"+winobj.lastName.value +"\n"+"Email:"+winobj.email.value +"\n");
                },win)}),
            "This window was created with DO.dom"
            )
        );


    }

Another example that allows the DOM structure to be child/parent aware.

with(DO.dom)
   {
var foo =div({parentElement:document.body},
       div({nid:'inputElements';},
        input({nid:'firstName'}),
        input({nid:'lastName'}),
        input({nid:'email'})            
        )
    );
   }

foo.inputElements.firstName.value = 'Hello';
foo.inputElements.lastName.value = 'Word';
foo.inputElements.email.value = '[email protected]';

Answer 1

A more typical approach these days, if you have to create a lot of DOM objects in javascript, is to use a templating system, such as Mustache (see also iCanHazjs), and thus translate javascript objects into HTML. The advantages are readable javascript and optimised DOM object creation. The disadvantage of this vs. your library is that this doesn't deal with the event binding.

Your library certainly seems powerful, but I would say that this might be very hard to read if you have are creating a lot of DOM objects.
What you'd end up with is a lot of .js code that essentially replicates an HTML document fragment, but with less readability.

This is the advantage of using HTML templates; that you can read the HTML structure easily, but in the javascript code, you don't have more than a line or two of code that does the DOM element creation. Also, templating systems generally build DOM objects in an efficient manner.

Also, I'd look into something like jQuery entwine as a possibility for easy-to-read event binding.