javascript - 从公式中获取数据并创建表，DOM，JavaScript

我必须从XHTML中的表单中获取数据并将其放入表中。

这是我的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" onclick="createNode()" />
        </p>
    </fieldset>
</form>
<table id="output"></table>

还有我的JavaScript中的函数：

function createNode() {


        var title;
        var autor;
        var category;
        title = document.getElementById("Title").innerHTML;
        autor = document.getElementById("Autor").innerHTML;
        category = ...

        var in_table = document.getElementById("output");
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.setAttribute("class", "buch_neu");
        td.appendChild(title);
        td.appendchild(autor);
        td.appendChild(category);
        tr.appendChild(td);

        in_table = tr.parentNode;
        var last = in_tabelle.lastChild;
        in_table.insertAfter(tr, last);
    }

但是，当我按下发送按钮时，什么也没有发生。按F12后出现错误“ Node.appendChild的参数1不是对象，但实际上应该是该方案，不是吗？

最佳答案

您应该创建并附加分隔的元素，并且函数不应返回匿名函数。

最重要的是，您的事件监听器应该在JS中移动：

http://jsfiddle.net/ghorg12110/8hg2uw57/1/

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;
}