如何延迟执行JavaScript且不移除页面元素？

核心问题出在document.write()的行为差异上：

• 无延迟执行时，代码大概率在页面加载过程中运行，document.write()只是把内容追加到当前文档流里，不会动已有的元素。
• 延迟执行时，页面已经完全加载完成，这时候调用document.write()会触发浏览器自动执行document.open()，直接清空整个页面的所有内容，包括你原来的广告元素，再写入新内容。

解决方案：替换document.write()为DOM操作 #

用标准的DOM方法添加内容，不会清空页面，比如insertAdjacentHTML()、appendChild()等。下面是修改后的代码：

延迟执行的JavaScript代码 #

const selecteAd = () => {
  const ads = document.querySelectorAll("[data-ad-status]");
  ads.forEach(ad => {
    const statusText = ad.getAttribute("data-ad-status") === "unfilled" ? "Unfilled" : "Filled";
    // 在每个广告元素后面插入结果标题，原元素不受影响
    ad.insertAdjacentHTML('afterend', `<h1>${statusText}</h1>`);
  });
}
// 延迟2秒执行
setTimeout(selecteAd, 2000);
// 如需重复执行可改用setInterval
// setInterval(selecteAd, 2000);

对应的HTML代码 #

<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"> 
  <img src="https://place-hold.it/338x280" />
</div>

<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse">
  <img src="https://place-hold.it/338x280" />
</div>

额外说明 #

如果需要把所有结果集中展示，可以先在HTML里加一个容器：

<div id="status-results"></div>

然后修改JS代码，把内容插入到这个容器里：

const selecteAd = () => {
  const resultsContainer = document.getElementById('status-results');
  const ads = document.querySelectorAll("[data-ad-status]");
  ads.forEach(ad => {
    const statusText = ad.getAttribute("data-ad-status") === "unfilled" ? "Unfilled" : "Filled";
    resultsContainer.innerHTML += `<h1>${statusText}</h1>`;
  });
}

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