JSFiddle - React, Tailwind, and code Playground

by tobint

HTML

<form id="controlForm">
    <div id="controls">
        <input type="radio" id="generateCreateElement" name="generationType" value="createElement">
            <label for="createElement">createElement</label>
            
        <input type="radio" id="generateInnerHTML" name="generationType" value="innerHTML">
            <label for="innerHTML">innerHTML</label>
            
            <input type="button" id="generator" value="Generate">
        <div id="results"> </div>
    </div>
</form>
        
<div id="classedContainer">
</div>
        
<div id="unclassedContainer" >
</div>

CSS

html, body { 
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial;
}

input, label {
    float: left;
}

label {
    margin-right: 20px;
    margin-left: 5px;
}

#results {
    clear: both;
    margin: 10px;
}

#controls {
    width: 100%;
    float: left;
    clear: both;
}

#classedContainer div {
    float: left;
    width: 100px;
    border: 1px solid #c0c0c0;
    text-align: center;
}

JavaScript

if(!window.globals) {
    window.globals = {};
}

window.addEventListener("load", function() {
    window.globals.container = document.getElementById("classedContainer");
    window.globals.results =  document.getElementById("results");
    window.globals.generator = document.getElementById("generator");
    window.globals.generationType = document.getElementsByName("generationType");
    window.globals.generateCreateElement = document.getElementById("generateCreateElement");
    window.globals.generateInnerHTML = document.getElementById("generateInnerHTML");
    
    window.globals.generator.addEventListener("click", generate(), false );
}, false );

function generate() {
    alert(document.controlForm.generationType[0].checked);
}


function loadElementsCreateElement() {
    var c = window.globals.container;  
    var start = performance.now();
    
    for(var i = 1; i <= 30000; i++) {
        var d = document.createElement("div");
        d.id = "div" + i;
        d.textContent = i;
        c.appendChild(d);
    }
    
    var end = performance.now();
    window.globals.results.textContent = ("load elements: " + Math.round(end - start) + "ms" );
}

function loadElementsInnerHTML() {
    var c = window.globals.container;  
    var text = "";
    var start = performance.now();

    for(var i = 1; i <= 30000; i++) {
        text += "<div id='" + i + "'>" + i + "</div>";
    }
    c.innerHTML = text;
    
    var end = performance.now();
     window.globals.results.textContent = ("load elements: " + Math.round(end - start) + "ms" );
}