JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

JavaScript

/* I will clean this up */
const h = (element, ...args) => {
  const el = typeof element === 'string' ? document.createElement(element) : element.cloneNode(false),
  	len = args ? args.length : 0
    
  let i = 0
  
  for (; i < len; i++) {
  	const o = args[i]
    var argType = typeof o

    if (o instanceof HTMLElement) {
      el.appendChild(o)
    } else if (Array.isArray(o)) {
    	o.forEach(e => {
      	el.appendChild(e)
      })
    } else if (typeof o === 'object') {
      Object.keys(o).forEach((key) => {
      	if (typeof o[key] === 'function') {
        	el.addEventListener(/^on\w+/.test(key) ? key.substring(2) : key, o[key], true)
        } else  {
          if (typeof o[key] === 'boolean') {
            el[key] = o[key]
          }
          el.setAttribute(key, o[key])
        }
      })
    } else if (typeof o === 'string') {
      el.textContent = o
  	}
  }

  return el
}

document.body.appendChild(h('div', { class: 'blue' }, 'hi', h('p', [1, 2, 3].map((n => h('b', String(n), {
 click: function() {
 	 console.log(this)
 }
}))))))

document.body.appendChild(h('input', { value: 'foo' }))

document.body.appendChild(h('input', { type: 'checkbox', checked: true }))

document.body.appendChild(h('table', [1,2,3].map((child) => {
	return h('tr', [1,2,3].map((td) => h('td', String(td))))
})))