JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div id="ou"></div>

JavaScript

var undefined;
var D = document;


function rep(o, n) {
    if (o.parentNode) o.parentNode.replaceChild(n, o);
    return n;
}

function app(r, n) {
    return r.appendChild(n);
}

function text(t) {
    return D.createTextNode(t);
}

function ele(el) {
    return D.createElement(el);
}

function set(n, an, av) {
    n.setAttribute(an, av);
}


function doObject(obj) {

    var nodo = ele(obj["TAG"]);
    for (var prop in obj) {
        if (prop != "INNER" && prop != "TAG") set(nodo, prop, obj[prop]);
        else if (prop == "INNER") {
            innerDom(nodo, obj["INNER"], true);
        }
    }
    return nodo;
}

function innerDom(domnode, obj, bapp) {
    var tmp;
    switch (obj.constructor) {
    case String:
        tmp = text(obj);
        break;
    case Number:
        tmp = text("" + obj);
        break;
    case Array:
        var tmp = D.createDocumentFragment();
        var max = obj.length;
        var i = 0;
        while (i < max) {
            innerDom(tmp, obj[i++], true);
        }

        break;
    case Object:
        tmp = doObject(obj);
        break;
    }
    if (bapp) app(domnode, tmp);
    else rep(domnode, tmp);
    return domnode;
}

var obj = {
    TAG: 'a',
    href: '#',
    INNER: {
        TAG: 'b',
        INNER: 'hi MooTools lurkerz'
    }
};

innerDom(document.getElementById("ou"), obj);