如何用JavaScript将输入框内容添加到HTML表格并支持多行插入

问题原因说明 #

• 内容显示异常：代码中获取的name、surname变量是输入框DOM元素对象，直接和字符串拼接时会默认调用对象的toString方法，因此输出[object HTMLInputElement]，需要访问DOM对象的value属性才能拿到用户输入的实际内容。
• 内容被覆盖：直接对整个table元素的innerHTML赋值，会覆盖表格原有的所有内容（包括表头），也没有做追加逻辑，所以每次新增都会清空之前的行，正确做法是将新行追加到表格的tbody节点内。

另外原HTML存在两个小瑕疵：Surname对应的label标签for属性值错写为name，无法点击标签聚焦到对应输入框；viewport元标签的initial-scale属性中间多了空格，也一并修复。

修复后完整代码 #

JavaScript代码 #

function add(){
    // 读取输入框实际输入值，做非空校验避免插入空行
    const name = document.getElementById("name").value.trim();
    const surname = document.getElementById("surname").value.trim();
    if (!name || !surname) return;

    // 找到tbody节点，追加新行，不会覆盖已有内容
    const tableTbody = document.querySelector("#output tbody");
    tableTbody.innerHTML += `<tr><td>${name}</td><td>${surname}</td></tr>`;

    // 可选：插入后清空输入框，方便下一次输入
    document.getElementById("name").value = "";
    document.getElementById("surname").value = "";
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td,th{
            border: 1px solid black;
            border-collapse: collapse;
            padding: 4px 8px;
        }
    </style>
</head>
<body>
    <form action="">
        <div>
            <label for="name">Name</label>
            <input type="text" id="name">
        </div>
        <div>
            <label for="surname">Surname</label>
            <input type="text" id="surname">
        </div>
    </form>
    <input type="button" onclick="add();" value="Add">
    <div>
        <table id="output">
            <thead><tr><th>Name</th><th>Surname</th></tr></thead>
            <tbody></tbody>
        </table>
    </div>
    <script>
        function add(){
            const name = document.getElementById("name").value.trim();
            const surname = document.getElementById("surname").value.trim();
            if (!name || !surname) return;
            const tableTbody = document.querySelector("#output tbody");
            tableTbody.innerHTML += `<tr><td>${name}</td><td>${surname}</td></tr>`;
            document.getElementById("name").value = "";
            document.getElementById("surname").value = "";
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者itmemilan