I am writing simple JS app that shows weather. After first query variables like

or every variable from
are appends to the specific element. But after another query they are not override but added next to the previous one. How can i fix that? Should I use
or just refresh the page after another API call?

const form = document.querySelector('#searchForm');
const currentTemp = document.querySelector('#temp');
const feelingTemp = document.querySelector('#feelingTemp');
const button = document.querySelector('button');
const img = document.createElement('img');
const searchCity = document.querySelector('#searchingCity');
const sky = document.querySelector('#skyStatus');
const bg_image = document.querySelector('.left-container');
const moreInfo = document.querySelector('.right-container');

const getWeather = async () => {

        const searchTerm = form.elements.query.value
        const res = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q={searchTerm}&units=metric&appid=3861eeae573a8188b76a2d6c0ceccfb9`)          let getTemp = res.data.main.temp,             getFeelsTemp = res.data.main.feels_like,             getTempMin = res.data.main.temp_min,             getTempMax = res.data.main.temp_max,             getPressure = res.data.main.pressure,             getHumidity = res.data.main.humidity;             getSkyIcon = res.data.weather[0].main          searchCity.append(searchTerm)         form.elements.query.value = '';          return [getTemp, getFeelsTemp, getTempMin, getTempMax, getPressure, getHumidity, getSkyIcon]                } catch (e){         return "WEATHER SERVICE IS DOWN :("     } }  const runApp = async () => {          form.addEventListener('submit', async function (e) {         e.preventDefault()          const [resTemp, resFeelsTemp, resTempMin, resTempMax, resPressure, resHumidity, resSkyIcon] = await getWeather()          // Głowny kontener informacyjny         currentTemp.append(`{Math.floor(resTemp)}°C`) 

        if(resSkyIcon === 'Clear'){
            img.src = "./img/sun.png"
            let finalImg = document.querySelector('#skyStatus')

            bg_image.style.backgroundImage = "url('img/sunny_bg.jpg')"

        }else if(resSkyIcon  === 'Clouds'){
            img.src = "./img/cloud.png"
            let finalImg = document.querySelector('#skyStatus')

            bg_image.style.backgroundImage = "url('img/cloud_bg.jpg')"
            img.src = "./img/rain.png"
            let finalImg = document.querySelector('#skyStatus')

            bg_image.style.backgroundImage = "url('img/rain_bg.jpg')"

        // Right box

        const array = [
            `Feels temp {Math.floor(resFeelsTemp)}°C`,             `Temp min{Math.floor(resTempMin)}°C`,
            `Temp max {Math.floor(resTempMax)}°C`,              `Pressure{resPressure}HPa`, 
            `Humidity ${resHumidity}%` 

        const ul = document.querySelector('ul');
        array.forEach((value) =>{
            const li = document.createElement('li');
            li.innerText = value




<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeatherApp - Rob</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 
    <link rel="stylesheet" href="./style.css">

    <div class="left-container">

        <div class="form-container">
            <form id="searchForm">
                <input type="text" placeholder="Weather in" name="query" id="searchInput">
        <div class="weather-output">
            <h2 id="temp"></h2>
            <h2 id="searchingCity"></h2>
            <h2 id="skyStatus"></h2>

        <div class="right-container">
            <h2 id="right-header">Informacje dodatkowe</h2>
            <div class="more-info-container">

    <script src="./app2.js"></script>

Anonymous Asked question May 13, 2021