JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

        window.onload = function(){

            var div = document.createElement('div');

            // 엘리먼트(div) 내부에 html 문자열을 할당한다.
            div.innerHTML = '<b style="color:red">DOM</b>';

            // body 요소에 엘리먼트를 추가한다.
            document.body.appendChild(div);

            var div2 = document.createElement('div');

            var scriptString = '<script type="text/javascript">alert(\'I am John in an annoying alert!\');<\/script>';
            // 엘리먼트(div) 내부에 할당된 스크립트 블럭은 실행되지 않는다.
            div2.innerHTML = scriptString;

            document.body.appendChild(div2);

            var div3 = document.createElement('div');
            div3.setAttribute('id', 'div3');
//
            var styleString = '<style type="text/css">#div3 { width: 100px; height: 100px; background-color: red; }<\/style>';
            // 엘리먼트(div)에 할당된 스타일 블럭은 적용된다.
            div3.innerHTML = styleString;

            document.body.appendChild(div3);

            var div4 = document.createElement('div');

            var img = '<img src="" onerror="alert(1);">';

            //  엘리먼트에 할당된 요소의 이벤트 핸들러는 실행된다.
            div4.innerHTML = img;

            document.body.appendChild(div4);


            var div5 = document.createElement('div');

            var a = '<a href="javascript:alert(\'a\')" onclick="alert(\'onclick event handling\')">exec javascript</a>';

            //  엘리먼트에 할당된 요소의 이벤트 핸들러는 실행된다.
            div5.innerHTML = a;

            document.body.appendChild(div5);
        }

    </script>
</head>
<body>
</body>
</html>