JavaScript 在 DIV 中动态加载脚本答案

【问题标题】：JavaScript load script dynamically inside a DIVJavaScript 在 DIV 中动态加载脚本
【发布时间】：2012-06-08 17:47:58
【问题描述】：

我已经动态创建了一个 DIV，我希望它包含一个 JavaScript 链接，它会在上面输出一些东西。 JavaScript 链接源是绝对的。显然，这是行不通的：

var div = document.createElement('div');
    div.id = 'mydiv';
    div.innerHTML = "<script type='text/javascript' " + 
                    "src='http://mydomain.com/myscript.js'></script>";
    document.body.appendChild(div);

所以我尝试了这个

var script = document.createElement('script')
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'http://mydomain.com/myscript.js');

var div = document.createElement('div');
    div.id = 'mydiv';

    div.appendChild(script);
    document.body.appendChild(div);

在我的脚本文件中，我有一个简单的alert('Testing...'); 代码。问题是它不起作用。脚本包含在 div 中输入（当我在 Chrome 中检查 DIV 时会看到它），但它不起作用。我没有看到 'Testing...' 消息。我错过了什么或做错了什么？谢谢！

【问题讨论】：

你试过document.getElementById('id-of-your-div').innerHTML('Loading...')吗？此外，您可以让 div 以 <div id='some-id'>Loading ...</div> 开头，然后脚本可以写入其 innerHTML。脚本不需要包含在 div 中，实际上也不应该，因为您可能会根据您对 div 内容所做的操作来覆盖它。
尝试在你的 JS 中加入“alert('testing')”。如果您在空白页上执行 document.write，您应该看到输出，但根据标记，即使实际上是写的，文本也可能不可见。您尝试附加 javascript 的方式应该可以正常工作。
如果您在 DOM 完成后执行此操作，即使您确实让脚本运行，您也无法在不将整个页面吹走的情况下执行 document.write建成。无论如何，您通常应该避免使用document.write；直接操作 DOM 会更有意义。
我尝试了你所有的建议。脚本已正确链接、添加，但未调用“alert('Testing')”函数。
阿里，看看：JSFiddle。显然，我将src 属性替换为innerHTML，因为我不会仅仅为了警报而托管JS，尝试调整它并确保您的脚本的来源是正确的。

标签： javascript dynamic include

【解决方案1】：

按照我的理解，您的代码不会等到 DOM 准备好。

建议使用 jquery 的ready，这将确保传递给它的脚本仅在 DOM 准备好后运行

希望对你有帮助

【讨论】：

好的。在将 div 附加到正文后，我将脚本附加到了 div，它现在可以工作了！
但这不是真正的原因/解决方案。在我的代码中，我在将脚本附加到 body 之前附加了脚本。

【解决方案2】：

<html>
<head>  
</head> 
<body>  
<script type='text/javascript'> 
    var script = document.createElement('script')
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'my.js');

    var div = document.createElement('div');
    div.id = 'mydiv';

    div.appendChild(script);
    document.body.appendChild(div); 
</script> 
</body>
</html>

这段代码对我有用，但是，是的，document.write() 对我不起作用。

【讨论】：