Small functional wrapper over `document.createElement` to create elements in the following manner `dom.div(elAttrs={}, childrens=[])`

dom.js

'use strict';

var DomApi = function DomApi(elements) {
  /**
   * Set attributes on giving element
   * @param {object} attrs
   * @param {HTMLElement} el
   */
  function setAttrs(attrs, el) {
    var uniqueId = Math.round(Math.random() * Date.now()).toString(20).substr(0, 4);
    Object.keys(attrs).forEach(function (key) {
     if(['function'].indexOf(typeof(attrs[key])) < 0) {
        el.setAttribute(key, attrs[key]);
      } else {
        el[key] = attrs[key];
      }
    });
    el.setAttribute('uid', uniqueId);
  }

  /**
   * If the values is a string set it as text;
   * @param {string} val
   * @param {HTMLElement} el
   * @returns {boolean}
   */
  function ifStringSetText(val, el) {
    if (!!val && !!val.match) {
      el.innerHTML = val;
      return true;
    }

    return false;
  }

  /**
   * Create and element function for ease of use as api
   * @param {string} tagName
   * @returns {function}
   */
  function createElement(tagName) {
    return function (attrs, children) {
      var el = document.createElement(tagName);
      attrs && setAttrs(attrs, el);
      if (children) {
        if (!!children.map) {
          children.forEach(function (child) {
            if (!ifStringSetText(child, el)) {
              el.appendChild(child);
            }
          });
        }

        ifStringSetText(children, el);
      }
      return el;
    };
  }

  var rDom = function rDom(elements) {
    var el = function el(e) {
      return createElement(e);
    };
    var minimal = ['h1', 'div', 'span', 'article', 'a', 'nav', 'button'];

    var elist = Array.isArray(elements) ? minimal.concat(elements) : minimal;
    elist.forEach(function (d) {
      el[d.toLowerCase()] = el.bind(null, d)();
    });
    return el;
  };

  return rDom(elements);
};

es6Dom.js

const DomApi = (elements) => {
  /**
   * Set attributes on giving element
   * @param {object} attrs
   * @param {HTMLElement} el
   */
  function setAttrs(attrs, el) {
    let uniqueId = Math.round(Math.random() * Date.now()).toString(20).substr(0, 4);
    Object.keys(attrs).forEach(key => el[key] = attrs[key]);
    el.setAttribute('uid', uniqueId);
  }

  /**
   * If the values is a string set it as text;
   * @param {string} val
   * @param {HTMLElement} el
   * @returns {boolean}
   */
  function ifStringSetText(val, el) {
    if (!!val && !!val.match) {
      el.innerHTML = val;
      return true;
    }

    return false;
  }

  /**
   * Create and element function for ease of use as api
   * @param {string} tagName
   * @returns {function}
   */
  function createElement(tagName) {
    return (attrs, children) => {
      let el = document.createElement(tagName);
      attrs && setAttrs(attrs, el);
      if (children) {
        if (!!children.map) {
          children.forEach(child => {
            if (!ifStringSetText(child, el)) {
              el.appendChild(child);
            }
          });
        }

        ifStringSetText(children, el);
      }
      return el;
    };
  }

  const rDom = function (elements) {
    let el = function (e) {
      return createElement(e);
    }
    let minimal = ['h1', 'div', 'span', 'article', 'a', 'nav', 'button'];

    let elist = Array.isArray(elements) ? minimal.concat(elements) : minimal;
    elist.forEach((d) => {
      el[d.toLowerCase()] = el.bind(null, d)();
    });
    return el;
  }

  return rDom(elements);
}