如何在页面加载过程中修改HTML DOM节点内容且避免可见变化？

1. 将脚本放在目标DOM节点之后 #

把修改DOM的脚本直接写在要修改的节点后面，浏览器从上到下解析HTML，当执行到这个脚本时，前面的目标节点已经存在于DOM中，此时修改内容后才会继续渲染后续部分，用户完全看不到原始内容。

示例代码：

<div id="target">原始内容</div>
<script>
  document.getElementById('target').textContent = '修改后的内容';
</script>

2. 使用DOMContentLoaded事件 #

DOMContentLoaded事件会在DOM树构建完成后立即触发——此时所有DOM节点都已可用，但图片、样式表等外部资源可能还没加载完成。相比window.onload，它的触发时间早得多，用户基本察觉不到内容变化。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('target').textContent = '修改后的内容';
});

如果把这段脚本放在<head>标签里，也能正常工作，因为事件监听会在DOM就绪时自动执行。

3. 服务器端直接修改内容 #

如果你的页面是服务器端生成的（比如PHP、Node.js渲染），直接在服务器生成HTML时就修改目标节点的内容。用户拿到的HTML本身就是修改后的版本，完全不会有内容切换的感知，这是最彻底的方案，尤其适合动态内容场景。

PHP示例：

<div id="target"><?php echo '修改后的内容'; ?></div>

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