Microsoft Edge兼容性问题：header中JS调用document.body.append()返回null咨询

嘿，这个问题我之前帮朋友排查过类似的，刚好能给你捋清楚！

核心原因 #

你把JS脚本放在<head>标签里了对吧？这时候浏览器解析到脚本就会立刻执行，而**旧版Edge（基于EdgeHTML内核的版本，不是现在的Chromium版）**在DOM构建的时序上和其他浏览器有差异：当脚本执行时，浏览器还没完成<body>元素的解析，所以document.body自然返回null。

而Chrome、Firefox、Safari甚至IE，在脚本位于<head>时，会提前初始化document.body的DOM节点（哪怕<body>里的内容还没解析完），所以调用document.body.append()能正常工作。

解决办法 #

这里给你几个靠谱的修复方案，任选其一就行：

• 把脚本移到<body>末尾：这是最直接的方式，确保脚本执行时<body>已经完全存在于DOM中

  <body>
    <!-- 你的页面内容 -->
    <script src="你的脚本文件.js"></script>
  </body>
  

• 监听DOMContentLoaded事件：让代码等到整个DOM树构建完成后再执行

  document.addEventListener('DOMContentLoaded', function() {
    // 这里写你的document.body.append()逻辑
    document.body.append(你的元素或内容);
  });
  

• 给脚本添加defer属性：这个属性会告诉浏览器延迟执行脚本，直到DOM解析完成，同时不阻塞页面渲染

  <head>
    <script src="你的脚本文件.js" defer></script>
  </head>
  

另外补充一句：现在的新版Edge已经切换到Chromium内核了，和Chrome的行为一致，不会出现这个问题，你遇到的应该是兼容旧版Edge的场景~

内容的提问来源于stack exchange，提问作者Dániel Gál