Return to Question

var jsonOfEl =
['html:form', {id:'myForm'},
        ['html:input', {type:'text', value:'my field'}],
        ['html:button', {id:'myBtn'}, 'Button Text Content']
];

document.body.appendChild(jsonToDOM(jsonOfEl, document, {}));

var json =
['html:div', {style:'background-color:springgreen'},
    ['html:form', {id:'myFirstForm'},
            ['html:input', {type:'text', value:'my field'}],
            ['html:button', {id:'myBtn'}, 'Button Text Content']
    ],
    ['html:form', {id:'mySecondForm'},
            ['html:input', {type:'text', value:'my field for second form'}],
            ['html:div', {},
                'Sub Div with textcontent and siblings',
                ['html:br', {}],
                ['html:input', {type:'checkbox', id:'mycheck'}],
                ['html:label', {for:'mycheck'},
                    'here is text of label, click this text will check the box'
                ]
            ]
    ]
];

document.body.appendChild(jsonToDOM(json, document, {}));

function jsonToDOM(xml, doc, nodes) {
    
    var namespaces = {
        html: 'http://www.w3.org/1999/xhtml',
        xul: 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'
    };
    var defaultNamespace = namespaces.html;
    
    function namespace(name) {
        var m = /^(?:(.*):)?(.*)$/.exec(name);        
        return [namespaces[m[1]], m[2]];
    }

    function tag(name, attr) {
        if (Array.isArray(name)) {
            var frag = doc.createDocumentFragment();
            Array.forEach(arguments, function (arg) {
                if (!Array.isArray(arg[0]))
                    frag.appendChild(tag.apply(null, arg));
                else
                    arg.forEach(function (arg) {
                        frag.appendChild(tag.apply(null, arg));
                    });
            });
            return frag;
        }

        var args = Array.slice(arguments, 2);
        var vals = namespace(name);
        var elem = doc.createElementNS(vals[0] || defaultNamespace, vals[1]);

        for (var key in attr) {
            var val = attr[key];
            if (nodes && key == 'key')
                nodes[val] = elem;

            vals = namespace(key);
            if (typeof val == 'function')
                elem.addEventListener(key.replace(/^on/, ''), val, false);
            else
                elem.setAttributeNS(vals[0] || '', vals[1], val);
        }
        args.forEach(function(e) {
            try {
                elem.appendChild(
                                    Object.prototype.toString.call(e) == '[object Array]'
                                    ?
                                        tag.apply(null, e)
                                    :
                                        e instanceof doc.defaultView.Node
                                        ?
                                            e
                                        :
                                            doc.createTextNode(e)
                                );
            } catch (ex) {
                elem.appendChild(doc.createTextNode(ex));
            }
        });
        return elem;
    }
    return tag.apply(null, xml);
}

var json =
[
    'html:form', {id:'myForm'},
        [
            'html:input', {type:'text', value:'my field'}
        ],
        [
            'html:button', {id:'myBtn'}, 'Button Text Content'
        ]
];

document.body.appendChild(jsonToDOM(json, document, {}));

function jsonToDOM(json, doc, nodes) {
    
    var namespaces = {
        html: 'http://www.w3.org/1999/xhtml',
        xul: 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'
    };
    var defaultNamespace = namespaces.html;
    
    function namespace(name) {
        var m = /^(?:(.*):)?(.*)$/.exec(name);        
        return [namespaces[m[1]], m[2]];
    }

    function tag(name, attr) {
        if (Array.isArray(name)) {
            var frag = doc.createDocumentFragment();
            Array.forEach(arguments, function (arg) {
                if (!Array.isArray(arg[0]))
                    frag.appendChild(tag.apply(null, arg));
                else
                    arg.forEach(function (arg) {
                        frag.appendChild(tag.apply(null, arg));
                    });
            });
            return frag;
        }

        var args = Array.slice(arguments, 2);
        var vals = namespace(name);
        var elem = doc.createElementNS(vals[0] || defaultNamespace, vals[1]);

        for (var key in attr) {
            var val = attr[key];
            if (nodes && key == 'key')
                nodes[val] = elem;

            vals = namespace(key);
            if (typeof val == 'function')
                elem.addEventListener(key.replace(/^on/, ''), val, false);
            else
                elem.setAttributeNS(vals[0] || '', vals[1], val);
        }
        args.forEach(function(e) {
            try {
                elem.appendChild(
                                    Object.prototype.toString.call(e) == '[object Array]'
                                    ?
                                        tag.apply(null, e)
                                    :
                                        e instanceof doc.defaultView.Node
                                        ?
                                            e
                                        :
                                            doc.createTextNode(e)
                                );
            } catch (ex) {
                elem.appendChild(doc.createTextNode(ex));
            }
        });
        return elem;
    }
    return tag.apply(null, json);
}

var jsonOfEl =
['html:form', {id:'myForm'},
        ['html:input', {type:'text', value:'my field'}],
        ['html:button', {id:'myBtn'}, 'Button Text Content']
];

document.body.appendChild(jsonToDOM(jsonOfEl, document, {}));

Here's an example of the usage

And the example from my fiddle above:

Here's an example of the usage: