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

I’m using JavaScript Fetch to get Data from OpenWeather Api. I have a form for users to input the City whose weather information they want to see. For some reason, the data from the previous city still pops up in the HTML page instead of disappearing for the new data to take its place. How do I clear the memory so that the new weather info from the newly searched city remains in the page? Below is the code for both JS and 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

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

Answer

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>