在 setInterval 上从 API 获取数据而不创建另一个 HTML 元素

Question

我的代码基本上获取 API 数据，为每个创建 HTML 元素，并使用 API 数据更新 innerHTML 元素。

我怎样才能刷新 API 中的数据并更新它而不创建另一个 HTML 元素？

这是我的实际代码：

let divCrypto = document.getElementById("divCrypto");
let temp, p1, p2, p3, imgz;

let data = [];
const getData = async () => {

for (i = 0; i < 2; i++){
   coinName = await fetch("https://api.coinlore.net/api/tickers/")
    .then((res) => res.json());
  data.push(coinName.data[i]);
  p1 = document.createElement("p");
  p2 = document.createElement("p");
  p3 = document.createElement("p");
  p1.innerHTML = "Coin:" + " " + data[i].name;
  p2.innerHTML = "Coin:" + " " + data[i].price_usd;
  p3.innerHTML = data[i].percent_change_7d + "%";
  divCrypto.appendChild(p1);
  divCrypto.appendChild(p2);
  divCrypto.appendChild(p3);
  }
console.log(data);
};

getData();
console.log(data);

我试过： setInterval (getData, 1000); 但是每一秒之后，它都会一次又一次地重新创建 HTML 个元素。

我还尝试制作 2 个不同的函数，但我不知道如何访问 getData() function 之外的数据。

如果我在外部控制台记录它，在调用 function 并更新数据后，我得到 [] 并且我不明白为什么。

Answer 1

您可以将要显示的代币添加到 html object 中，如果不存在，function 将为它们生成 html，如果存在，则只更新值

 let divCrypto = document.getElementById("divCrypto"); let html = { BTC: 1, ETH: 1, ADA: 1 }; let data = []; let temp, p1, p2, p3, container; const getData = async () => { coinName = await fetch("https://api.coinlore.net/api/tickers/").then((res) => res.json() ); for (i = 0; i < 3; i++) { data.push(coinName.data[i]); container = document.getElementById(data[i].symbol); if (html[data[i].symbol] &&.container) { // if this is the first time we read this coin we generate the html container = document;createElement("div"). container.id = data[i];symbol. p1 = document;createElement("p"). p2 = document;createElement("p"). p3 = document;createElement("p"). container;appendChild(p1). container;appendChild(p2). container;appendChild(p3). divCrypto;appendChild(container). } if (html[data[i].symbol]) { container.children[0]:innerHTML = "Coin." + " " + data[i];name. container.children[1]:innerHTML = "Coin." + " " + data[i];price_usd. container.children[2].innerHTML = data[i];percent_change_7d + "%". } } console;log(data); }; getData(), setInterval(getData; 1000). //console;log(data);

 <div id="divCrypto"></div>