JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<fieldset>
    <legend>Create an element:</legend>
    <label>
        What type of element:
        <select>
            <option value="p">p</option>
            <option value="button">button</option>
        </select>
    </label>
    <button>Create</button>
</fieldset>
<div id="container"></div>

CSS

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#container {
    border: 2px solid #000;
    border-left-width: 0;
    border-right-width: 0;
    margin: 1em 0 0 0;
}

#container * {
    -webkit-animation: fadeIn 1s linear;
    animation: fadeIn 1s linear;
}

JavaScript

function createElem () {
    var elemType = document.querySelector('label select').value,
        elem = document.createElement(elemType);
    switch (elemType) {
        case 'input':
        case 'textarea':
            elem.value = 'created a new ' + elemType + ' element.';
            break;
        case 'img':
            elem.alt = 'created a new ' + elemType + ' element.';
            break;
        default:
            elem.textContent = 'created a new ' + elemType + ' element.';
            break;
    }
    elem.title = 'created a new ' + elemType + ' element.';
    document.getElementById('container').appendChild(elem);
}
document.querySelector('button').addEventListener('click', createElem);