Очистить старые результаты перед загрузкой новых результатов запроса в javascript

Когда я нажимаю на ссылку, она отображает результат в div под названием «Результаты». Когда я нажимаю на другую ссылку, она отображает результат в том же div без очистки предыдущего

полученные результаты. Это мой код, как я могу привести его в порядок и отображать только необходимый результат. Я попытался

const data = document.getElementById("data");
data.innerHTML = '';

Но это не сработало.

Вот мой код:

const displayItem = (item, value) => {
  const pre_data = document.createElement('pre');
  const dt_data = document.createElement('dt');
  dt_data.textContent = item;
  pre_data.appendChild(dt_data);
  if (value !== 'undefined') {
    const dd_data = document.createElement('dd')

    if (item == "url") {
      const link = document.createElement('a');
      link.textContent = value;
      link.setAttribute('href', '#')
      link.addEventListener('click', function(e) {
        console.info("I'm working!")
        console.info(e.target.innerHTML)
        fetchData(e.target.innerHTML)
      });
      dd_data.appendChild(link);

    } else {
      dd_data.textContent = value;

    }

    pre_data.appendChild(dd_data);

    if (item == "link") {
      const text = document.createElement('a');
      text.textContent = value;
      text.setAttribute('href', '#')
      text.addEventListener('click', function(e) {
        console.info("I'm working!")
        console.info(e.target.innerHTML)
        fetchData(e.target.innerHTML)
      });
      dd_data.appendChild(text);
    } else {}

    pre_data.appendChild(dd_data);
  }
  return pre_data;
}
const formatResult = (entity, level) =>{
  const dl = document.createElement('dl');


  for(let k in obj) {
    if (typeof obj[k]=== "object"  ){
      dl.appendChild(displayItem(k))
      
      if (Array.isArray(obj[k])){
        obj[k].forEach(results =>  
          {
          if (typeof results=== "object"  ){           
              dl.appendChild(formatResult(results) ) 
             

          }
        
        else{
          dl.appendChild(displayItem(results))
        }
        
        }
          
          );

      } else{
        dl.appendChild(formatResult(obj[k]))
      }
    } else {
      dl.appendChild(displayItem(k, obj[k]))
      
    }
  }

 return dl;

}

//empty div
const myData = document.getElementById("myData");
results.innerHTML = '';


function fetchData(url){
 
  fetch(url)
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
  console.info(JSON.stringify(data))
     myData.append(formatResult(data))
    }
})
.catch(console.error);
}

const showResult=document.getElementById("showResult");

catalog.addEventListener("onclick",  fetchData(`localhost:8000/data`));

Как выглядит мой html div:

<button id = "showResult">View Result</button>
<div id = "myData"></div>