A basic function to create dom elements (lindy.js)

lindy.js

// signatures
// (root)
// (root, inner)
// (root, {})
// (root, {}, inner)
// inner = '' || [] - array can have text or html els
// {} = options i.e. onclick, class, id, etc.

var signatures = {
  1: function(root) {
    "use strict";
    var el, className, idName;
    // handle class root
    if (root[0] === ".") {
      className = root.split(".");
      el = document.createElement("div");
      el.setAttribute("class", className[1]);
    }

    // handle id root
    if (root[0] === "#") {
      idName = root.split("#");
      el = document.createElement("div");
      el.setAttribute("id", idName[1]);
    }

    // handle svg
    var terms = [
      "svg",
      "altGlyph",
      "altGlyphDef",
      "altGlyphItem",
      "animate",
      "animateColor",
      "animateMotion",
      "animateTransform",
      "circle",
      "clipPath",
      "color-profile",
      "cursor",
      "defs",
      "desc",
      "ellipse",
      "feBlend",
      "feColorMatrix",
      "feComponentTransfer",
      "feComposite",
      "feConvolveMatrix",
      "feDiffuseLighting",
      "feDisplacementMap",
      "feDistantLight",
      "feFlood",
      "feFuncA",
      "feFuncB",
      "feFuncG",
      "feFuncR",
      "feGaussianBlur",
      "feImage",
      "feMerge",
      "feMergeNode",
      "feMorphology",
      "feOffset",
      "fePointLight",
      "feSpecularLighting",
      "feSpotLight",
      "feTile",
      "feTurbulence",
      "filter",
      "font",
      "font-face",
      "font-face-format",
      "font-face-name",
      "font-face-src",
      "font-face-uri",
      "foreignObject",
      "g",
      "glyph",
      "glyphRef",
      "hkern",
      "image",
      "line",
      "linearGradient",
      "marker",
      "mask",
      "metadata",
      "missing-glyph",
      "mpath",
      "path",
      "pattern",
      "polygon",
      "polyline",
      "radialGradient",
      "rect",
      "set",
      "stop",
      "switch",
      "symbol",
      "text",
      "textPath",
      "title",
      "tref",
      "tspan",
      "use",
      "view",
      "vkern"
    ];
    if (terms.indexOf(root) !== -1) {
      el = document.createElementNS("http://www.w3.org/2000/svg", root);
    }

    // handle basic root
    if (!el) {
      el = document.createElement(root);
    }

    return el;
  },

  2: {
    string: function(root, inner) {
      "use strict";
      var el = signatures[1](root);
      el = signatures.inner(el, inner);
      return el;
    },

    object: function(root, options) {
      "use strict";
      var el = signatures[1](root);
      el = signatures.options(el, options);
      return el;
    }
  },

  3: function(root, options, inner) {
    "use strict";
    var el = signatures[1](root);
    el = signatures.options(el, options);
    el = signatures.inner(el, inner);
    return el;
  },

  inner: function(el, inner) {
    "use strict";
    var i;

    if (inner instanceof Array) {
      if (typeof inner[0] === "string") {
        // special case: html element in array of strings like <br>
        for (i = 0; i < inner.length; i++) {
          if (typeof inner[i] === "object") {
            inner[i] = inner[i].outerHTML;
          }
        }

        el.innerHTML += inner.join("");
      } else {
        // html elements
        for (i = 0; i < inner.length; i++) {
          let child = inner[i];
          if (typeof child === "function") {
            child = child();
          }
          if (typeof child === "string") {
            el.innerHTML += child;
            continue;
          }
          el.appendChild(child);
        }
      }
    } else {
      el.innerHTML += inner;
    }

    return el;
  },

  options: function(el, options) {
    "use strict";
    var key, style;

    if (options.tagName) {
      return el.appendChild(options);
    }

    for (key in options) {
      if (key === "style") {
        if (options[key] instanceof CSSStyleDeclaration) {
          el.style = options[key].cssText;
        } else {
          for (style in options[key]) {
            el.style[style] = options[key][style];
          }
        }
      } else if (key === "class") {
        if (el.className.length) {
          el.className = el.className + " " + options[key];
        } else {
          el.setAttribute("class", options[key]);
        }
      } else if (
        el.namespaceURI === "http://www.w3.org/2000/svg" &&
        key.indexOf("on") === -1
      ) {
        el.setAttributeNS(null, key, options[key]);
      } else {
        options[key] ? (el[key] = options[key]) : (el[key] = "");
      }
    }

    return el;
  }
};

function lindy(root, optionOrInner, inner) {
  "use strict";
  var el, length;
  length = arguments.length;
  if (length === 2) {
    // handle 2 length arguments
    if (optionOrInner instanceof Array || typeof optionOrInner === "string") {
      el = signatures[length].string.apply(undefined, arguments);
    } else {
      el = signatures[length].object.apply(undefined, arguments);
    }
  } else {
    el = signatures[length].apply(undefined, arguments);
  }

  return el;
}

try {
  module.exports = lindy;
} catch (msg) {}

try {
  window.lindy = lindy;
} catch (msg) {}