如何使用 TS 的渲染功能使 HTML 输入在我的网站上可见？

Question

当我向数组提交一个新的 Person 并将其显示在表行中时，我一直试图让 renderUserList 正常工作。为了测试它是否从一开始就渲染，我从一开始就将第一个人添加到数组中。当我控制台记录数组和渲染函数本身时，它们似乎可以工作。当我“提交”某些内容时，数组会增加并且站点会重新呈现。然而，无论我做什么，我的页面仍然是空的，只有数组似乎真正按预期工作，但我的 html dom 没有丝毫改变。

class Person {
    public Firstname: string;
    public Lastname: string;
    constructor(Firstname: string, Lastname: string) {
        this.Firstname = Firstname;
        this.Lastname = Lastname;
    }
}

let people: Person[] = [
    new Person("Peter", "Parker")]

document.addEventListener("DOMContentLoaded", () => {
    renderUserList(people);

    document.getElementById("add-user").addEventListener("submit", (event) => {
        event.preventDefault();

        const FormField: HTMLFormElement = document.getElementById("add-person") as
            HTMLFormElement
        const FirstNameInput: HTMLInputElement = document.getElementById("Firstname") as
            HTMLInputElement;
        const LastNameInput: HTMLInputElement = document.getElementById("Lastname") as
            HTMLInputElement;
        const FName: string = FirstNameInput.value;
        const LName: string = LastNameInput.value;
        if (FName && LName) {
            people.push(new Person(FName, LName));
            renderUserList(people);
            FormField.reset();
        }
    })

    function renderUserList(userlist: Person[]): void {
        const peoplelist: HTMLElement = document.getElementById("peoplelist")
        for (let i: number = 0; i < userlist.length; i++) {
            peoplelist.innerHTML = "";
            `<tr>
        <td class="p-3 table-font">${people[i].Firstname}</td>
        <td class="p-3 table-font">${people[i].Lastname}</td>
        <td>
            <button class="btn tablebutton delete-button list-button" data-idx="${i}"><i class="fas fa-trash-alt"></i></button>]
            <button type="button" class="btn tablebutton edit-button list-button" data-bs-toggle="modal" data-bs-target="#ModalWindow" data-idx="${i}"><i class="fas fa-user-edit"></i></button>
        </td>
    </tr>`;
        }
    }
})

Answer 1

这可能是一个错字吗？peoplelist.innerHTML = "";包含标记的模板字符串正上方有一行<tr>。我敢打赌，这样的事情是有意的。

\n

function renderUserList(userlist: Person[]): void {\n  const peoplelist: HTMLElement = document.getElementById("peoplelist");\n  for (let i: number = 0; i < userlist.length; i++) {\n    peoplelist.innerHTML = `<tr>\n        <td class="p-3 table-font">${people[i].Firstname}</td>\n        <td class="p-3 table-font">${people[i].Lastname}</td>\n        <td>\n            <button class="btn tablebutton delete-button list-button" data-idx="${i}"><i class="fas fa-trash-alt"></i></button>]\n            <button type="button" class="btn tablebutton edit-button list-button" data-bs-toggle="modal" data-bs-target="#ModalWindow" data-idx="${i}"><i class="fas fa-user-edit"></i></button>\n        </td>\n    </tr>`;\n  }\n}\n

\n

不过，仍然存在一些问题，因为innerHTML循环内的分配将替换以前的内容，最终只渲染最后一个人。for您可以在将所有行一次分配给 \xe2\x80\x94 之前在循环中构建标记peoplelist.innerHTML，或者甚至可能研究其他 DOM 操作方式，例如insertAdjacentHTML.

\n\n

另外，顺便说一句，在将用户输入呈现为标记时，最好记住可能的安全问题。如果有人输入代码作为他们的名字怎么办？您能否将您不信任的部分呈现为纯文本（textContent例如，使用 ）？

\n