JSFiddle - React, Tailwind, and code Playground

by ConnorM

HTML

<div id="wrapper"></div>

JavaScript

function createElement(){
	var element  = document.createElement(arguments[0]),
	    text     = arguments[1],
	    attr     = arguments[2],
	    append   = arguments[3],
	    appendTo = arguments[4];

	for(var key = 0; key < Object.keys(attr).length ; key++){
		var name = Object.keys(attr)[key],
			 value = attr[name],
			 tempAttr = document.createAttribute(name);
			 tempAttr.value = value;
		element.setAttributeNode(tempAttr)
	}
	
	if(append){
		for(var _key = 0; _key < append.length; _key++) {
			element.appendChild(append[_key]);
		}
	}

	if(text) element.appendChild(document.createTextNode(text));

	if(appendTo){
		var target = appendTo === 'body' ? document.body : document.getElementById(appendTo);
		target.appendChild(element)
	}       

	return element;
}


/////////////////////////////////// MAKING THE ELEMENTS //////////////////////////////////////

    var options = [
        createElement('option', 'Volvo', {value: 'volvo'}),
        createElement('option', 'Saab', {value: 'saab'}),
        createElement('option', 'Mercedes', {value: 'mercedes'}),
        createElement('option', 'Audi', {value: 'audi'})
    ];
    
    createElement('h1', 'Please Select 1 Option', 
                  {id: 'heading', style: 'color:skyblue;font-family:arial;text-align:center;'}, 
                  null, 'wrapper') // append this one to #wrapper

    createElement('select', null,
                  {id: 'Select1', name: 'drop1', style:'width:80%;margin:0 10%;'},
                  [options[0], options[1], options[2], options[3]], 
                  'body' // Append to body 
    );