Jamilih Lite (see also https://github.com/brettz9/jamilih ); for adaptation and inclusion in stand-alone libraries which still wish to build the DOM in an attractive, pure JS, and syntax-highlighting/JS-friendly manner. For the string-building equivalent, see https://gist.github.com/brettz9/72bb6a460212d9350f67

jamilih-lite.js

    function jml (elName, atts, children) {'use strict';
        var el = typeof elName === 'string' ? document.createElement(elName) : elName;
        if (atts && Array.isArray(atts)) {
            children = atts;
        }
        else if (atts) {
            Object.keys(atts).forEach(function (att) {
                var attVal = atts[att];
                if (att === '$on') {
                    return Object.keys(attVal).forEach(function (ev) {
                        var val = attVal[ev];
                        val = (typeof val === 'function') ? [val, false] : val;
                        el.addEventListener(ev, val[0], val[1]);
                    });
                }
                if (typeof attVal === 'object') { // e.g., with att as 'dataset' or 'style' (use cssFloat in place of float on style)
                    return Object.keys(attVal).forEach(function (prop) {
                        el[att][prop.replace(/-([a-z])/g, function (n0, n1) {
                            return n1.toUpperCase();
                        })] = attVal[prop];
                    });
                }
                el.setAttribute(att, attVal);
            });
        }
        (children || []).forEach(function (child) {
            if (['string', 'number', 'boolean'].indexOf(typeof child) > -1) {
                el.appendChild(document.createTextNode(child));
            }
            else {
                el.appendChild(jml.apply(null, child));
            }
        });
       return el;
    }