Replace innerHTML with another method to avoid destroying event handler

Question

In my app when I search in the search bar, a dropdown menu would appear, and when I click on the dropdown-item, new info is parsed using innerHTML method.

However, the associated event handler is also destroyed. I'm trying to find ways to replace innerHTML but haven't been able to. The thing is, inside innerHTML it is a whole block of HTML code, including tags and texts. Plus, whenever a new dropdown item is clicked, the previous HTML code should be removed and new ones parsed in. I've been trying with removeChild() then appendChild() or insertAdjacentHTML(), to no avail.

Weirdly, it seems even with insertAdjacentHTML() the event handler is still destroyed. (I tried insertAdjacentChild() without removing the previous code, and event handler works only on the previous item, not the item added by insertAdjacentChild()).

Original code:

async function init (name) {
  await fetchCurrentData(name)
  await weatherBackground(name)

  const forecastHoursList =  await hoursList(name)
  document.querySelector('.forecast ul').innerHTML = renderHourlyForecast(forecastHoursList)

  const forecastDailyList =  await dailyList(name)
  document.querySelector('.future ul').innerHTML = renderDailyForecast(forecastDailyList)
}

What I tried but didn't work:

async function init (name) {
  await fetchCurrentData(name)
  await weatherBackground(name)
  const forecast = document.querySelector('.forecast ul')
  const future = document.querySelector('.future ul')

  const forecastHoursList =  await hoursList(name)

  const forecastChildren = forecast.childNodes
  for(var i = 0; i < forecastChildren.length; i++) {
    forecast.removeChild(forecastChildren[i]);
  }
  forecast.insertAdjacentHTML('afterbegin', renderHourlyForecast(forecastHoursList))

  const forecastDailyList =  await dailyList(name)

  const futureChildren = future.childNodes
  for(var i = 0; i < futureChildren.length; i++) {
    future.removeChild(futureChildren[i]);
  }
  future.insertAdjacentHTML('afterbegin', renderDailyForecast(forecastDailyList))
}