Magic DOM: Moving JavaScript forward

What about this kind of syntax:

var elem = createNode([
  'div', 
  {id:'foo', class:'someclass'}, [
    ['span', {class:'spanclass'}],
    'this is a text node ',
    ['br']
  ]
]
);

But the best thing would be if it supported good old innerHTML syntax.

I prefer the traditional syntax.
But it's a pretty good idea, congratulations! ;)

I have made a similar script -
http://www.openjs.com/scripts/...

Other implementations...
http://www.arantius.com/articl...
http://www.vivabit.com/code/do...

Interesting...

Just for the record, it will fail in IE for certain attributes...

e.g. "frameborder" on an iframe, "for" on a label

oh wait, Label isn't supported... nor fieldset or legend?

I would drop support for center and small too... since they are essentially deprecated now.

also for IE, appending a text node to a script tag won't work (bug in IE)

also, it should be noted (again for an IE bug), that the "type" attribute should be set right away (e.g. first) on an input tag... otherwise IE defaults to text, and you can't change it.

finally, (another IE bug), if you need to set the name attribute of a node (e.g. a form field), when you create it you have to do (and yeah, I know this is severely ugly).

document.createElement('<tagname name="desiredName">');

e.g.

document.createElement('<input name="specialExtra">');

I too created my own version of a generic DOM builder... and about 18 lines of it are purely to get around IE bugs. :P

Oh the fun of working with IE.

In IE javascript event handlers Ex. 'onsubmit':'parseFrom()' don't get translated properly in Magic DOM. Adding the following lines to createDOM will help handle some basic event handlers for elements.

else if(/^on(.*)/i.test(k))
eval("elm."+k+" = function(){"+attr+"};");

So createDOM looks like this now:

createDOM: function(name, attrs) {
        var i=0, attr;
        var elm = document.createElement(name);
		

        var first_attr = attrs[0];
        if(MagicDOM.isDict(attrs[i])) {
            for(k in first_attr) {
                attr = first_attr[k];
                if(k == "style")
                    elm.style.cssText = attr;
                else if(k == "class" || k == 'className')
                    elm.className = attr;
		else if(/^on(.*)/i.test(k))
			eval("elm."+k+" = function(){"+attr+"};");
		else {
                    elm.setAttribute(k, attr);
                }
            }
            i++;
        }

        if(first_attr == null)
            i = 1;

        for(var j=i; j < attrs.length; j++) {
            var attr = attrs[j];
            if(attr) {
                var type = typeof(attr);
                if(type == 'string' || type == 'number')
                    attr = TN(attr);
                elm.appendChild(attr);
            }
        }

        return elm;
    },

Interesting realization.
It would good to finish off it for correct work in MSIE.

It’s very good article. Great site with very good look and perfect information. I like it too.

It’s very good article. Great site with very good look and perfect information. I like it too.