在 Javascript 中使用 appendChild 和 IE答案

【问题标题】：Using appendChild with IE in Javascript在 Javascript 中使用 appendChild 和 IE
【发布时间】：2011-10-28 17:53:38
【问题描述】：

我在 IE 中使用此代码时遇到问题（使用 Chrome 似乎可以正常工作）：

<html>
<body>
<script type="text/javascript">
    var scriptContent = "var whatever=1";
    var _js = document.createElement('script');
    _js.setAttribute('type', 'text/javascript');
    textNode = document.createTextNode(scriptContent);
    _js.appendChild(textNode);  
    document.getElementsByTagName('body')[0].appendChild(_js);
</script>
</body>
</html>

我在 Internet Explorer (IE9) 中遇到的错误是：语句“_js.appendChild(textNode)”上的“意外调用方法或访问属性”。

有没有办法解决这个问题？

【问题讨论】：

根据我的阅读，IE9 在使用 appendChild 到 body 元素时存在一些问题（我知道您的错误在此之前）。理想情况下，无论如何您都希望将脚本放入头部，而不是正文。

标签： javascript internet-explorer appendchild

【解决方案1】：

如您所见，IE 中的here appendChild() 不适用于<script>-元素。（好像 IE9 支持它，但它取决于浏览器模式）

Nivas之前有一个正确答案，可惜已被删除。在IE中使用

_js.text = scriptContent;

【讨论】：

【解决方案2】：

您的脚本在 DOM 准备好之前执行，因此获取 <body> 标记是一种竞争条件。实际上，我在 Chrome 15 和 Firefox 8 中遇到了同样的错误。

在页面加载后调用时可以看到代码works，例如在函数中

HTML

<a href="#" onclick="return append()">append</a>

JavaScript

function append() {
    var scriptContent = "var whatever=1";
    var _js = document.createElement('script');
    _js.setAttribute('type', 'text/javascript');
    textNode = document.createTextNode(scriptContent);
    _js.appendChild(textNode);  
    document.getElementsByTagName('body')[0].appendChild(_js);
    return false;
}

【讨论】：

是的，问题是关于让它在 IE9 中运行，我测试过它并且它可以运行（但我完全同意这取决于哪种浏览模式）。我相信我的回答对于 DOM 未准备好部分仍然有效，因为在 DOM 准备好后没有调用 append 的情况下，我在不同的浏览器中得到完全相同的错误
我认为 appendChild 的问题不在于正文，而在于脚本标签。
@andyb：我猜IE9一直是用过的浏览器，但是OP也喜欢让它在早期版本中运行（仍然有很多WinXP用户无法使用IE9）。但当然你的答案仍然有效，也很好:)