setTimeout后使用document.write导致页面被清空的问题

你遇到的页面被清空的问题，核心原因是页面加载完成后调用document.write会覆盖整个文档。当你的setTimeout在5秒后执行时，浏览器已经完成了页面的渲染，此时document.write会自动调用document.open()，创建一个新的空白文档流，直接替换掉原来的页面内容——这就是为什么数字显示正确，但页面其他部分都没了。

我们需要放弃document.write，转而找到页面中专门用来显示数量的元素，直接修改它的文本内容即可。

步骤1：修改HTML，给显示数量的元素加ID #

先给<b>标签加一个唯一ID，方便JS定位：

<i class="fas fa-archive"></i> <a href="listed.html"> Listed :</a> <b id="list-count"></b>

步骤2：修改JS代码，更新元素内容 #

如果你继续使用jQuery，可以这样写：

setTimeout(function() { 
  // 找到目标元素，设置它的文本内容为列表项数量
  $("#list-count").text($("#myUL li").length); 
}, 5000);

如果不想依赖jQuery，用原生JS也可以实现：

setTimeout(function() { 
  const countElement = document.getElementById('list-count');
  const listItems = document.getElementById('myUL').querySelectorAll('li');
  countElement.textContent = listItems.length;
}, 5000);

这样修改后，5秒后只会更新<b id="list-count">里的内容，页面其他部分完全不受影响，既实现了延迟显示数量的需求，又避免了页面被清空的问题。

内容的提问来源于stack exchange，提问作者Reginald1234