JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

JavaScript

var head = document.head || document.getElementsByTagName('head')[0];

createStyle();
createScript();
createHeader();

function createScript() {
    var script = document.createElement('script');
    //script.src = "http://whatever.com/the/script.js";
    var scriptText = 'alert("script executing!");';
    var textNode = document.createTextNode(scriptText);
    script.appendChild(textNode);
    head.appendChild(script);
}

function createStyle() {
    var style = document.createElement('style');
    style.type = 'text/css';
    var cssText = '.header { background: yellow; }';
    if (style.styleSheet) {
        style.styleSheet.cssText = cssText;
    } else {
        var css = document.createTextNode(cssText);
        style.appendChild(css);
    }

    head.appendChild(style);
}

//<h1 id="header1" class="header" style="color:red;">hello</h1>
function createHeader() {
    var h1 = document.createElement("h1");
    h1.textContent = "hello";
    h1.setAttribute("id", "header1");
    h1.setAttribute("class", "header");
    h1.setAttribute("style", "color:red;");
    h1.addEventListener("click", function () {
        alert("h1 clicked!");
    });
    document.body.appendChild(h1);
}