当document.body存在时执行js

Question

我在文档HEAD部分中有这样的脚本。

<html>
<head>
    <title>Javascript Tests</title>    
    <script type="text/javascript">
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);
    </script>
</head>
<body>
</body>
</html>

在此脚本中，我想将元素添加到主体，但由于document.body为null异常而失败。 我知道该身体目前不存在。 但是我仍然需要执行此操作，因为无法将此脚本插入正文，受API限制，我无法访问所有站点代码。

重要的一点：在窗口加载之前，我需要执行此操作（我的意思是window.load事件）。

我可以这样做吗？

Answer 1

如果您不想使用Jquery ，则可以使用DOMContentLoaded 请参见此处的参考。

当文档完全加载并解析后，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件

document.addEventListener("DOMContentLoaded", function(event) {
    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";
    mySpan.style.color = "red";
    document.body.appendChild(mySpan);
});

浏览器支持：

Chrome     Firefox (Gecko)         IE   Opera   Safari

0.2         1.0 (1.7 or earlier)   9.0  9.0     3.1

Answer 2

我通常避免使用框架，除非绝对必要，但在这种情况下，我认为您可以使用jquery：

$(function () {
    // do stuff after DOM has loaded
});

因此，将您的代码包装如下：

<script type="text/javascript">
$(function () {
    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);
});
</script>

记住，您将需要引用jQuery

这与window.onload onload在加载所有其他资源（图像等）之后执行

我在示例中显示的代码将在DOM完成加载后执行

Answer 3

看起来最快的检测document.body何时可用的方法是使用MutationObserver ，如https://stackoverflow.com/a/26324641/454780所示

当document.body存在时执行js

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-04-11 08:53:36

解决方案2
1 2014-04-11 08:45:15

解决方案3
0 2019-01-30 04:31:24

当document.body存在时执行js

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-04-11 08:53:36

解决方案2 1 2014-04-11 08:45:15

解决方案3 0 2019-01-30 04:31:24

解决方案1
3 已采纳 2014-04-11 08:53:36

解决方案2
1 2014-04-11 08:45:15

解决方案3
0 2019-01-30 04:31:24