IE6/IE7 中的 appendChild 不适用于现有元素答案

【问题标题】：appendChild in IE6/IE7 does not work with existing elementsIE6/IE7 中的 appendChild 不适用于现有元素
【发布时间】：2009-08-05 10:36:17
【问题描述】：

我有一个 div 需要在 DOM 中从一个地方移动到另一个地方。所以目前我正在这样做：

flex.utils.get('oPopup_About').appendChild(flex.utils.get('oUpdater_About'));

但是，IE，好吧，IE，它不起作用。它适用于所有其他浏览器，只是不适用于 IE。

我需要这样做，因为元素 (div) 'oUpdater_About' 需要重复使用，因为它会一遍又一遍地填充。

所以我只需要能够在 DOM 周围移动 div，appendChild 会让这发生在所有浏览器中，但是，IE。

提前致谢！

【问题讨论】：

appendChild 一直在 IE 中为我工作。您确定“flex.utils.get”返回的是一个实际的 DOM 元素节点，而不是一些特定于库的类似节点的对象吗？
当然，这只是 document.getElementById 脚本的包装。我试图用 document.getElementById 替换它，同样的问题。问题可能是我没有即时创建元素吗？它已经存在于 DOM onload 中。理论上不应该！但你知道 IE。
我从来没有遇到过这个问题； IE 对我来说一直正常工作，从其现有父级中删除元素并将其附加到新父级。在进行追加之前尝试将两个节点都放入变量中，这样您就可以使用 alert() （或您首选的调试工具），以确保您得到了您认为得到的结果。
还有一件事：如果您尝试追加的元素是表格，我相信 IE 会强制您显式找到 tbody 元素并追加到该元素。

【解决方案1】：

您必须先删除节点，然后才能将其附加到其他任何位置。一个节点不能同时在两个地方。

var node = flex.utils.get('oUpdater_About')
node.parentNode.removeChild(node);
flex.utils.get('oPopup_About').appendChild(node);

【讨论】：

你是认真的吗？这很古怪！你不需要通过常规的 DOM 操作来做到这一点。 flex 包装器在 IE 和其他浏览器下调用相同的代码吗？
@scunliffe：我没有找到任何线索来说明您是否可以重新附加一个已经附加在 DOM 中某处的节点。你有可以为我澄清的消息来源吗？
我有一个 ajax 循环，它将为我的每个子节点调用 appendChild（即使实际上没有移动到不同的父节点）。我在 IE 中的内存泄漏只需先调用 removeChild 即可解决。

【解决方案2】：

确保克隆 oUpdater_About（使用 node.cloneNode(true)）这样你就可以得到一份副本，并且可以根据需要（在任何浏览器中）多次重复使用 dom-sn-p

【讨论】：

【解决方案3】：

这篇文章倾向于表明 appendChild 确实存在与此相关的问题：

您是否尝试过克隆、删除它，然后插入克隆？

詹姆斯

【讨论】：