OpenWeather Api 使用 JavaScript 获取用户输入将以前的数据保留在 HTML 页面中

Question

我正在使用 JavaScript Fetch 从 OpenWeather Api 获取数据。我有一个表格供用户输入他们想要查看其天气信息的城市。出于某种原因，之前城市的数据仍然会在 HTML 页面中弹出，而不是消失，以便新数据取而代之。如何清除内存，让新搜索到的城市的新天气信息保留在页面中？下面是 JS 和 HTML

的代码

var weatherData = document.getElementById("weather_data");
  weatherData.addEventListener('click',function(e){
 e.preventDefault();
 var cityName = document.getElementById("cityName").value;
 var url = "https://api.openweathermap.org/data/2.5/weather?q="+cityName+"&appid=1b81668fc60a1d1905a3e5a311d45414";
  if(cityName == ""){
      alert("Enter a city name");
  }else{
  fetch(url).then(function(response){
      if(response.ok){
          return response.json();
      }else{
          throw new Error(Error);
      }
  }).then(function(data){
      console.log(data);
    const html =    `
        <h2 class="text-danger text-center"><span class="text-dark">City:</span>${data.name}</h2>
        ` ;
      document.getElementById("display_data").insertAdjacentHTML('afterbegin',html);
  }).catch(function(error){
      console.log(error);
  });
  }
});

HTML形式

<form>
 <input type="text" id="cityName" placeholder="Enter a city name"><br>
 <input type="submit" value="Get Weather Information" id="weather_data">
</form>

Answer 1

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.

var weatherData = document.getElementById("weather_data");
  weatherData.addEventListener('click',function(e){
 e.preventDefault();
 var cityName = document.getElementById("cityName").value;
 var url = "https://api.openweathermap.org/data/2.5/weather?q="+cityName+"&appid=1b81668fc60a1d1905a3e5a311d45414";
  if(cityName == ""){
      alert("Enter a city name");
  }else{
  fetch(url).then(function(response){
      if(response.ok){
          return response.json();
      }else{
          throw new Error(Error);
      }
  }).then(function(data){
    const html =    `
        <h2 class="text-danger text-center"><span class="text-dark">City:</span>${data.name}</h2>
        ` ;
      document.getElementById("display_data").innerHTML = html;
  }).catch(function(error){
      console.log(error);
  });
  }
});

<form>
 <input type="text" id="cityName" placeholder="Enter a city name"><br>
 <input type="submit" value="Get Weather Information" id="weather_data">
</form>

<div id="display_data"></div>

OpenWeather Api 使用 JavaScript 获取用户输入将以前的数据保留在 HTML 页面中

OpenWeather Api Using JavaScript Fetch With User Input Keeps Previous Data in HTML Page

html

javascript

json

fetch

openweathermap