JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<form method="post">
    <fieldset>
        <p>
            <label for="Title">Title:
                <input type="text" name="title" id="Title" />
            </label>
        </p>
        <p>
            <label for="Autor">Autor:
                <input type="text" name="autor" id="Autor" />
            </label>
        </p>
        <p>Category:</p>
        <select name="cat" id="Cat" size="1">
            <option>Bestseller</option>
            <option>Novel</option>
            <option>Music</option>...</select>
        <p>
            <input type="button" value="Send" id="submitBtn" />
        </p>
    </fieldset>
</form>
<table id="output"></table>

JavaScript

document.getElementById("submitBtn").addEventListener("click", createNode);

function createNode() {
    var title = document.getElementById("Title").value;;
    var autor = document.getElementById("Autor").value;
    var category = document.getElementById("Cat").value;
    var in_table = document.getElementById("output");

    var tr = insertNode("tr", {}, in_table);
    insertNode("td", {"class": "buch_neu", "text": title}, tr);
    insertNode("td", {"class": "buch_neu", "text": autor}, tr);
    insertNode("td", {"class": "buch_neu", "text": category}, tr);
    insertNode("tr", {}, in_table);
}
function insertNode(type, attrs, wrapper) {
    var node = document.createElement(type);
    wrapper.appendChild(node);
    for (var key in attrs) {
        if (key === "text") {
            node.innerHTML = attrs[key];
        } else {
            node.setAttribute(key, attrs[key]);
        }
    }
    return node;
}