JSFiddle - React, Tailwind, and code Playground

by levchenko_d

JavaScript

function create(data){
	var element = document.createElement(data.tag || div);
  
  for(key in data.attributes){
  	element.setAttribute(key, data.attributes[key]);
  }
  
  for(evnt in data.events){
  	element.addEventListener(evnt, data.events[evnt]);
  }
  
  element.innerHTML = data.content || '';
  
  (data.childs || []).map(function(child){
		element.appendChild(create(child));
  });
  
  return element;
};

/*
{
	tag String
	attributes Obj
  events Obj
  content String || HTML
  childs Arr
}
*/

var stuff = create({
	'tag' : 'div',
  'attributes': {
  	'class' : 'parent'
  },
  'events' : {
	  'click' : function(){console.log('parent click')}
  },
  'content' : 'parent',
  'childs' : [
  	{
    	'tag' : 'h1',
      'attributes': {
        'class' : 'title'
      },
      'content' : 'Title'
    },
    {
    	'tag' : 'p',
      'attributes': {
        'class' : 'description'
      },
      'content' : 'This is description',
      'childs' : [
      	{
        	'tag' : 'span',
          'attributes': {
            'class' : 'embed'
          },
          'content' : ' I\'m embed!'
        }
      ]
    },
    {
    	'tag' : 'input',
      'attributes' : {
      	'name' : 'test',
        'placeholder' : 'Enter some stuff'
      },
      'events' : {
      	'keyup' : function(){console.log(this.value)}
      }
    }
  ]
});

document.body.appendChild(stuff);