JSFiddle - React, Tailwind, and code Playground

by phloe

JavaScript

var chars = [];
var code = 65;
var num = 5;
var endCode = code + num;
while (code <= endCode) {
    chars.push(String.fromCharCode(code++));
}

var levels = 5;

var dom = ["div", populate(0)];

function populate (i) {
    return chars.map(function (char) {
        return ["div." + char, (i < levels) ? populate(i+1): []];
    });
}

function construct (dom) {
    var selector = dom[0];
    if (typeof selector == "string") {
        var m = selector.match(/^([^.]+|)((?:\.[^.]+)+|)$/);
        var tag = m[1] || "div";
        var className = m[2] && m[2].slice(1).replace(".", " ");
        var element = document.createElement(tag);
        if (className) {
            element.className = className;
        }
    }
    var children = 1 in dom && dom[1];
    if (children) {
        var i = 0;
        var l = children.length;
        while (i < l) {
            element.appendChild(construct(children[i++]));
        }
    }
    return element;
}

var root = construct(dom);

console.log(root);