Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Get CSS selectors</title>
    </head>

    <body>
        <h1>Create a table with the content of CSS selectors</h1>
        <div class="instr">Write some CSS selectors(separated by ';'), press Enter and the Javascript code will create a table with the inner Html of those<br>
        Try: p;.expclass;#expid</div>
        <p>This is the content of a simple paragraph tag</p>
        <div class="expclass"> This is the content of a tag with a class</div>
        <div id="expid"> This is the content of a tag with id </div>

    </body>

    <script>
        var input = document.createElement("INPUT");
        input.setAttribute("type", "text");
        input.setAttribute("value", "Hello World!");
        input.setAttribute("id", "myText");
        document.body.appendChild(input);
        var text;
        input.addEventListener("keyup", function(event) {
          if (event.keyCode === 13) {
            event.preventDefault();
            text=document.getElementById("myText").value;
            createTable(text);
          }
        });
        function createTable(text) {
            var selectors=text.split(";");
            var body=document.body, tbl  = document.createElement('table');
            tbl.style.border = '1px solid black';
            selectors.forEach(function(el) {
                var appear=document.querySelectorAll(el);
                appear.forEach(function(txt) {
                    var tr = tbl.insertRow();
                    var td = tr.insertCell();
                    td.appendChild(document.createTextNode(txt.innerHTML));
                });
            });
            body.appendChild(tbl);
        }
    </script>
</html>