JSFiddle - React, Tailwind, and code Playground

by mlms13

CSS

.green {
    color: green;
}
.weak {
    font-weight: normal;
}

JavaScript

var mlms = {};
mlms.dom = {};
mlms.dom.create = function (tag, attributes) {
    var args = arguments,
        el = document.createElement(tag),
        attr,
        i;

    // Add all attributes to the element
    if ((typeof attributes).toLowerCase() === 'string') {
        el.className = attributes;
    } else {
        for (attr in attributes) {
            if (attributes.hasOwnProperty(attr)) {
                el.setAttribute(attr, attributes[attr]);
            }
        }
    }

    // Append child elements and text nodes
    for (i = 2; i < args.length; i++) {
        if ((typeof args[i]).toLowerCase() === 'string') {
            el.appendChild(document.createTextNode(args[i]));
        } else {
            el.appendChild(args[i]);
        }
    }

    return el;
};
mlms.dom.replaceText = function () {
};
mlms.dom.appendText = function (element, text) {
    element.appendChild(document.createTextNode(text));
};
mlms.dom.remove = function (element) {
    element.parentNode.removeChild(element);
};

var h = mlms.dom.create('h1', 'green weak', 'Title!!'),
    p = mlms.dom.create('p', null, 'This is my paragraph.'),
    inpt = mlms.dom.create('input', {'type' : 'submit', 'value' : 'Go'}),
    div = mlms.dom.create('div', null, h, p, inpt, 'test');
document.body.appendChild(div);
mlms.dom.appendText(p, ' Another test');