Javascript 更新HTML数据而不在网页上创建更多元素

每隔3秒加载一次html，但希望刷新它，而不是在已经生成的代码下继续添加更多内容

async function Products(){
            setInterval(async function() {
                const response = await fetch('http://localhost:3000/api/products');
                const data = await response.json();

                const mainContainer = document.getElementById("myData");
                for (let obj of data) {
                    const div = document.createElement("div");
                    div.innerHTML = `${obj["sku"]}: ${obj["name"]}`;
                    mainContainer.appendChild(div);
                }
            }, 10000)
        }

---

当我点击开始按钮时，一切正常，但是我如何让它刷新已经生成的HTML，而不是按间隔重复创建它呢。试图找出一个好的方法来解决这个问题。谢谢

立即创建并附加一个

，并在间隔时间内将其

内部HTML

分配给它：

function Products() {
    const container = document.getElementById("myData").appendChild(document.createElement("div"));
    setInterval(async function () {
        const response = await fetch('http://localhost:3000/api/products');
        const data = await response.json();
        container.innerHTML = '';
        for (let obj of data) {
            container.innerHTML += `${obj["sku"]}: ${obj["name"]}`;
        }
    }, 10000)
}

---

我认为您要做的是实现一系列可观察的元素，您只能查找那些已更改的元素，而不是所有数据，就像React对虚拟DOM所做的那样

考虑到已经发布的代码兜售，以设定的间隔刷新元素是个坏主意。如果有1000个用户同时刷新，会怎么样？如果它导致您的响应音调超过3秒怎么办

也就是说，如果您真的想创建类似的东西，那么您必须找到一种方法来加载api中的所有产品，而只是加载不同的产品。同样，如果你想保持这种状态，我认为你可以做以下几点：

从加载页面上的所有产品开始，但是设置一个间隔来检查一个新的端点，该端点将告诉您在最后一个端点之后添加了哪些产品

使用索引或键来识别哪种产品是哪种产品，这样你就可以知道你有哪些产品了

您需要知道quick product自上次加载以来是否已更新

这是一个开始。您可以用不同的方式实现这些。我建议为创建和更新的时间设置一个时间戳，这样您就可以只查询那些在这个时间戳之后的人

将动态ID添加到产品元素中，（例如，

**此处的产品**

这样，您就可以跟踪您的产品，并仅重新创建更改/更新的产品

---

这显然是实现开放连接的一种复杂方式，如果您想要另一种解决方案，您也可以使用api打开一个套接字，它将发送更新和创建数据的事件，并最终使您的3秒ping过时，从而在我看来具有更好的可伸缩性仅显示一个副本，但不再显示所有obj，只显示阵列列表上的最后一个sku:名称