时间戳

首页 > 解决方案 > 更新 HTML 数据而不在网页上创建更多元素

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，而不是在间隔内重复重新创建它。试图找出一个好的方法来解决这个问题。谢谢

标签： javascripthtmlapifetch

解决方案

立即创建并附加 a <div>，并在间隔内分配给它的innerHTML：

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)
}

推荐阅读