title: Fetch data from API on setInterval without creating another HTML elements
body: <p>My code basically fetches API data, creates HTML elements for each and update the innerHTML elements with API data.</p>
  <p>How can I possibly refresh the data from API and update it without creating another HTML elements?</p>
  <p>This is my actual code:</p>
  <pre><code>let divCrypto = document.getElementById(&quot;divCrypto&quot;);
  let temp, p1, p2, p3, imgz;
  
  let data = [];
  const getData = async () =&gt; {
  
  for (i = 0; i &lt; 2; i++){
     coinName = await fetch(&quot;https://api.coinlore.net/api/tickers/&quot;)
      .then((res) =&gt; res.json());
    data.push(coinName.data[i]);
    p1 = document.createElement(&quot;p&quot;);
    p2 = document.createElement(&quot;p&quot;);
    p3 = document.createElement(&quot;p&quot;);
    p1.innerHTML = &quot;Coin:&quot; + &quot; &quot; + data[i].name;
    p2.innerHTML = &quot;Coin:&quot; + &quot; &quot; + data[i].price_usd;
    p3.innerHTML = data[i].percent_change_7d + &quot;%&quot;;
    divCrypto.appendChild(p1);
    divCrypto.appendChild(p2);
    divCrypto.appendChild(p3);
    }
  console.log(data);
  };
  
  getData();
  console.log(data);
  </code></pre>
  <p>I tried with : setInterval (getData, 1000); but after each second, it recreates the HTML elements again and again.</p>
  <p>I also tried to make 2 different functions but I don't know how to access the data outside the getData() function.</p>
  <p>If I console log it outside, after the function is called and the data is updated, I get [] and I cannot understand why.</p>