点击按钮添加员工信息输入行失败，寻求技术解决

点击<button onclick="Addrow()">Add Employees Row</button>按钮时，希望添加一行包含多个输入框的员工信息行，尝试用appendChild和insertAdjacentHTML方法均未成功，目标是每行包含职位、员工姓名、员工ID、前公司输入框和删除按钮。

我的代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Employees Details</title>
    <link rel="stylesheet" href="css/employees.css" />
    <script src="./js/Employees.js" defer></script>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="title">Employees Details</div>
            <div class="AddRow">
                <button onclick="Addrow()">Add Employees Row</button>
            </div>
        </div>
        <div class="contents-grid">
            <div class="contents">
                <div class="Detail-Info-Grid">
                    <input type="text" placeholder="Designation" />
                    <input type="text" placeholder="Employee Name" />
                    <input type="text" placeholder="Employee ID" />
                    <input type="text" placeholder="Prev Company" />
                </div>
                <div class="remove">
                    <button>Remove</button>
                </div>
            </div>
        </div>
        <div class="submit">
            <button>Submit</button>
        </div>
    </div>
</body>
</html>

CSS #

.wrapper {
    background-color: lightpink;
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    padding: 10px;
}
.header {
    background-color: lightblue;
    justify-content: center;
    display: flex;
}
button {
    border-radius: 10px;
    background-color: lightblue;
    padding: 5px;
    border: 1px solid;
}
::placeholder {
    text-align: center;
    color: black;
}
input {
    margin: 10px;
    background-color: lightblue;
    padding: 3px;
    border: 1px solid;
}
.title {
    align-items: center;
    flex: 1;
    display: flex;
    justify-content: center;
    transform: translateX(65px);
}
.remove {
    display: flex;
    align-items: center;
}
.contents {
    background-color: lightseagreen;
    display: flex;
    flex-direction: row;
}
.contents-grid {
    display: flex;
    flex-direction: column;
}
.submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

错误的JavaScript代码 #

const ContentsGrid = document.getElementsByClassName("contents-grid");
const Addrow = function () {
    const html = `<div class="contents"><div class="Detail-Info-Grid"><input type="text" placeholder="Designation" /><input type="text" placeholder="Employee Name" /><input type="text" placeholder="Employee ID" /><input type="text" placeholder="Prev Company" /></div><div class="remove"><button>Remove</button></div></div>`;
    ContentsGrid.appendChild(html);
    //   ContentsGrid.insertAdjacentHTML("afterend", html);
    //   ContentsGrid.innerHTML += html;
};
// document.getElementById("AddEmployeesRow").addEventListener("click", Addrow);

问题原因 #

1. document.getElementsByClassName返回的是HTMLCollection集合，不是单个DOM元素，直接调用appendChild或insertAdjacentHTML会报错，需要通过索引[0]获取目标元素。
2. appendChild方法要求传入DOM节点对象，不能直接传HTML字符串，若要用字符串，需用insertAdjacentHTML或修改innerHTML。

修正后的JavaScript代码 #

// 获取单个目标容器元素
const contentsGrid = document.getElementsByClassName("contents-grid")[0];

const Addrow = function () {
    const html = `
        <div class="contents">
            <div class="Detail-Info-Grid">
                <input type="text" placeholder="Designation" />
                <input type="text" placeholder="Employee Name" />
                <input type="text" placeholder="Employee ID" />
                <input type="text" placeholder="Prev Company" />
            </div>
            <div class="remove">
                <button onclick="removeRow(this)">Remove</button>
            </div>
        </div>
    `;
    // 用insertAdjacentHTML在容器内部末尾添加新行
    contentsGrid.insertAdjacentHTML("beforeend", html);
};

// 添加删除行功能
function removeRow(btn) {
    // 找到当前按钮所在的contents行并删除
    const row = btn.closest(".contents");
    row.remove();
}

说明 #

• 修正了容器元素的获取方式，从集合中取出第一个元素。
• 使用insertAdjacentHTML("beforeend", html)在contents-grid容器内部末尾插入新行，符合需求。
• 给删除按钮添加了onclick="removeRow(this)"，实现点击删除对应行的功能，通过closest(".contents")快速定位要删除的行元素。

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