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>

在这个脚本中我想添加元素到body，但是它失败了 document.body is null 异常。我知道此时身体不存在。但是我仍然需要做这个操作，因为一个无法将此脚本插入到body中，它受API限制，我无法访问所有站点代码。

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

我可以这样做吗？

Answer 1

如果您不想使用Jquery，可以使用DOMContentLoaded see reference here

文档完全加载并解析后会触发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

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

当document.body存在时执行js

3 个答案: