为什么在js注入html后我的元素被推离页面?

我已经制作了一个简单的搜索引擎来查询有关我的大学教师的信息。当搜索结果有限时,它会很好地工作,但是当结果很多时,JS会将它们很好地注入到DOM中,但是它将其余元素(如搜索栏和标题)推离页面。

看看我的意思是搜索类似“ MURUGAN”的名称,看起来不错:

但是,当您搜索更通用的名称(例如“ M”)时,它显然会显示很多结果(有很多用M命名的人),我也可以。我不想限制结果的数量。但是,这些庞大的结果数量是将标题和搜索引擎推离了页面:

You can even test this out for now on https://vit-faculty-search-ef30b.web.app/

您可以看到我的ui.js文件正在使用insertAdjacentHTML在页面上推送这些结果。但是,为什么将其他内容从页面上删除呢?