JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <style>
        .parent .before { color: red; }
        .parent .after { color: blue; }
        </style>
    </head>
    <body>
        <script></script>
        <div class="parent">
            <span>before script block</span>
            <script>
            var s = document.getElementsByTagName('script');
            var here = s[s.length-1];
            
            var red = document.createElement("p");
            red.className = 'before';
            red.innerHTML = "red text";
            here.parentNode.insertBefore(red, here);
            
            var blue = document.createElement("p");
            blue.className = 'after';
            blue.innerHTML = "blue text";
            here.parentNode.appendChild(blue, here);
            </script>
            <span>after script block</span>
        </div>
        <script></script>
    </body>
</html>