Internet Explorer Javascript 的 AppendChild 问题答案

【问题标题】：AppendChild issue with Internet Explorer JavascriptInternet Explorer Javascript 的 AppendChild 问题
【发布时间】：2011-11-11 22:58:34
【问题描述】：

下面这段代码，在 Firefox 和 Chrome 中都能正常运行，但在 IE 中却让我头疼。

var anotherDiv= document.getElementById("anotherDiv");
var destination = document.getElementById("mySourceDiv");    
destination.appendChild(anotherDiv);

我正在尝试获取一个 div 元素并将其放置在另一个 div 中。我收到类似于“不支持接口”的错误消息（在 IE 的调试控制台中），并将我指向 appendChild 行。我所看到的是目标变量的类型是一个对象而不是一个 DOM 元素。

如何将 anotherDiv 附加到 mySourceDiv？我正在 IE 8 中尝试这个。

【问题讨论】：

在重新附加之前，您是否尝试过从“anotherDiv”的父级显式调用“removeChild”？
我现在试试，chrome和firefox会自动删除那个div。
@Pointy 我试过了，还是不行。我从 window.opener.document.getElementById("...") 获取对该 div 的引用，它返回一个对象而不是 DOM 对象。当我尝试做 removeChild 时，我得到 Invalid 参数。我试图移动的 div 来自另一个窗口，我正试图将它放在那个弹出窗口中。
啊 - 所以你想把一个 DOM 元素从一个窗口拖到另一个窗口？好吧，我（部分迷信）的信念是，IE 对像这样在上下文之间徘徊的东西非常挑剔。但是我不能说我确定这就是问题所在。
试过anotherDiv.cloneNode()?

标签： javascript internet-explorer html internet-explorer-8 appendchild

【解决方案1】：

您可能需要像 importNode 这样的东西，周围有各种跨浏览器解决方案。问题是每个节点上都有一个相应的文档对象，在 IE 中，所谓的安全性在将内容从一个文档移动到另一个文档时效果不佳。

所以，本质上它是在进行深度克隆，但使用 cloneNode 的区别在于，cloneNode 还设置了您不想要的文档。

这可能会让你朝着正确的方向前进： IE support for DOM importNode

【讨论】：

我会看看你发布的链接。我无法在此 div 上进行克隆，因为它包含来自 Bing 地图的一些动态响应，并且在尝试克隆时，我将该地图作为静态图像获取。
你不会调用 clone 本身，基本上你迭代当前对象并重新创建每个属性、子节点等......完全正确。查看 importNode 规范也会让您了解需要做什么。但这很可能是问题所在。希望对您有所帮助。

【解决方案2】：

我建议您使用旨在为您解决浏览器不兼容性问题的库。我个人认为 jQuery 非常好。 jQuery 有一个append 函数。

【讨论】：

从你上面的cmets来看，听起来更像是IE中Bing Maps对象的问题。您是否尝试过使用 jQuery.detach() 然后 jQuery.append() 移动不同的 Div 元素？这至少有助于缩小问题所在。
所有append 所做的是调用appendChild。这并不能解决问题