JavaScript IE appendChild() - 对方法或属性访问的意外调用答案

【问题标题】：JavaScript IE appendChild() - Unexpected call to method or property accessJavaScript IE appendChild() - 对方法或属性访问的意外调用
【发布时间】：2010-12-15 02:06:08
【问题描述】：

我在 IE 中一直遇到这个问题。我有两个 div，我用它们将选定的元素从一个拖动到另一个。假设我在 div1 中有一个子元素（也是一个 div），在 div2 中有一些子元素。我在 div1 的子元素上调用 div2.appendChild() 方法。它从 div1 中删除子元素并将其附加到 div2。如果我然后尝试将孩子附加回 div1，我会在 IE 中收到以下异常“意外调用方法或属性访问”。它在 Firefox 中运行良好。请参阅下面的 javascript 代码 sn-p。

function moveSelectedGroupBoxItems(toLocation, grp){
    document.body.className = 'groupBoxDefaultCursor';
    if(groupBoxfromLocation != toLocation){
        if(grp == groupBoxGroup){
            var fromVal = document.getElementById(groupBoxfromLocation);
            var toVal = document.getElementById(toLocation);

            var children = fromVal.childNodes;
            for (var i = children.length - 1; i >= 0; i--) {
                if(children[i].className == 'groupBoxItemSelected'){
                    children[i].childNodes[0].name=toLocation;
                    toVal.appendChild(children[i]);
                }
            }
        }
    }
    groupBoxfromLocation = '';
    groupBoxGroup = '';
    return false;
}

这基本上是在拖动时将选定的子 div 从一个父 div 移动到另一个父 div。

【问题讨论】：

...这些肯定是 div 的？不是选项、表格、thead、tfoot、tbody、tr、td、脚本、样式或参数元素？ ;-)

标签： javascript internet-explorer call appendchild

【解决方案1】：

对于搜索结果的好处 - 在将子节点附加到命名空间元素时，我在 IE 6 和 7“意外调用方法或属性访问”中遇到了同样的错误，但尚未声明命名空间。

var a=document.createElement("foo:blah");
var b=document.createElement("div");
a.appendChild(b); //Fails

为了解决这个问题，我不得不将命名空间声明添加到 HTML 代码中：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo>

或通过 javascript 动态（可能应该包装在 try/catch 中）：

var namespaces = document.namespaces;
if(namespaces) {
    namespaces.add("foo", null, null);
}

【讨论】：

+1 这并没有完全解决我的问题，但引导我找到了解决方案。我的使用 HTML5 标签<section> 没有 HTML5 shiv。将其更改为 <div> 并且有效。

【解决方案2】：

我在 IE7 中遇到过这个问题，结果证明 IE7 DOM 并不完美。

在我的例子中，我有一个由 ASP.NET MCV TagBuilder 呈现的图像标签，它呈现为：

<img ...></img>

注意那里的结束标签，这就是导致问题的原因。它在呈现为时起作用：

<img ... />

希望这会有所帮助。

【讨论】：

【解决方案3】：

我同意 Kaze noe Koe 的观点，动态设置元素的名称并不是最安全的做法。不幸的是，我不能告诉你如何摆脱这个错误。但是，我强烈推荐使用 JavaScript 库（jQuery、Prototype、Dojo，...）。它们非常小，相对容易学习，并且比可怕的 DOM API 更方便使用。最后但并非最不重要的一点是，它们可以保护您免受许多此类尴尬的浏览器不兼容问题的影响。试一试，几天后你无法想象回去，我保证。

【讨论】：

【解决方案4】：

你确定它不会死吗：

children[i].childNodes[0].name=toLocation;

你想用这条线完成什么？

说真的，请尝试将其注释掉。我什至不认为它是您认为的那样 - 不是正确的属性称为 nodeName 吗？

【讨论】：

【解决方案5】：

children[i].childNodes[0].name=toLocation;

父 div 中包含的每个子 div 还包含一个隐藏的输入值。父 div 不包含名称属性，仅包含 id。当子 div 从一个父 div 拖到另一个父 div 时，它会将所有隐藏输入的名称值更新为 div id。提交表单后，服务器可以区分特定父 div 中存在哪些值。到目前为止，这在 IE 和 Firefox 中都有效。问题肯定出在 appendChild() 方法中，因为它不断违反此语句。如果加载时父 div 为空，则一切正常。如果父 div 的子元素被附加到不同的 div 然后又回来，我只会在 IE 中得到异常。

很遗憾，我目前还无法实现框架。我们的标签经常更改以适应新的要求。

感谢您对我的主题的回复，希望现在更有意义。

干杯

Grep

【讨论】：

【解决方案6】：

解决了！...有点像我在子 div 中隐藏了输入，这些输入存储了要移动以提交表单的项目的 id。我删除了隐藏的输入并将它们放在我的选择框下方。每次移动 div 时，它都会将隐藏的名称更新为父 div id。当节点有子节点时，似乎 IE 的 appendChild() 存在问题。这有时确实有效，有时却失败了。附加一个没有子元素的元素总是有效的。我不确定到底是什么问题，但上面已经解决了。

干杯

Grep

【讨论】：

【解决方案7】：

刚刚在 IE7 上遇到了同样的问题，通过添加超时解决了它：

setTimeout(function(){gallery.appendChild(g_field)},300);

我已经记不清有多少次某些东西在 IE 中无法运行，但在 Firefox 中却可以通过短暂的延迟解决...不知道为什么！

对不起！很快就谈过了...原来我的超时（在这种情况下）不起作用。

【讨论】：

我敢打赌，如果你在gallery.appendChild(g_field) 之前插入一个alert("") 而没有延迟它可能会起作用。 IE 是唯一一个除了显示消息之外，警报还有其他功能的浏览器。