javascript - 使用javascript在页面末尾动态添加js文件？

Question

我想在页面底部</body>之前添加一个js文件标签。

我正在尝试一种格式。但它无法正常工作。

我的代码

var url = 'sample.js';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);

但它不起作用。

现在我检查

var x = document.getElementsByTagName('body');
alert(x.length);

其显示0

如何将此 js 文件添加到页面底部。请指教

Answer 1

参见this代码

var body = document.body;
alert("Body when page loading: " + body);
document.addEventListener("DOMContentLoaded", function() {
    var bodyLoaded = document.body;
    alert("Body when page loaded: " + bodyLoaded);
    var url = "http://code.jquery.com/jquery-1.10.2.min.js";
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = url;
    script.onload = function(){
        var testP = $("<p></p>");
        testP.html("JQuery worked");
        $(document.body).append(testP);
    }
    bodyLoaded.appendChild(script);
});  

如果首先警报，您将得到null。但在第二步(当正文加载时)你会得到 HTMLBodyElement。如果您尝试在加载正文之前将元素附加到 head 中的正文，这是您的错误。