为什么在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在页面上推送这些结果。但是，为什么将其他内容从页面上删除呢？