javascript - 更新通过appendChild创建的元素

Question

我使用以下命令在文档中创建了一个表格:document.body.appendChild(table)

现在每次我在 table 上进行更改时我都想运行

document.body.removeChild(table)
document.body.appendChild(table)

以便更新我页面上的表格内容。然而，这首先行不通，因为我得到

app.js:75 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

作为一条错误消息，而且它似乎也是解决问题的一个非常笨拙的解决方案。

Answer 1

now every time I make a change on my table I want to run...so that the content of the table on my page is updated

没必要这么做。只需修改表即可。它是 DOM 中的一个对象；对它的修改由浏览器呈现。这是 DOM 工作原理的基础。

var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
document.body.appendChild(table);
var timer = setInterval(function() {
    // This modifies the existing table
    tbody.insertAdjacentHTML(
        "beforeend",
        "<tr><td>" + tbody.children.length + "</td></tr>"
    );
    if (tbody.children.length == 5) {
        clearInterval(timer);
    }
}, 500);