el.js

function el(...args) {
  const argMap = { String: "type", Object: "props", Array: "children" };
  args.forEach((arg) => (args[argMap[arg.constructor.name]] = arg));

  if (!args.props && !args.children) return document.createTextNode(args.type);
  const $el = document.createElement(args.type);

  for (let key in args.props || {}) {
    $el[key.toLowerCase()] === null
      ? $el.addEventListener(key.substr(2).toLowerCase(), args.props[key])
      : $el.setAttribute(key, args.props[key]);
  }

  args.children?.forEach((child) => $el.appendChild(el(...child)));
  return $el;
}

/* USAGE:

  function onClick(e) {
    alert(e)
  }

  const div = el('div', {}, [
    ['h2', {}, [['Counter:']]],
    ['button', { onClick, style: 'color: red;' }, [['alert']]],
  ])

  document.body.appendChild(div)

*/