internet-explorer - 如何保存其父 innerHTML 属性设置为空字符串的元素的 DOM 引用（在 IE 中）

Question

在 IE 中，当设置innerHTMLDOM 元素的属性时，会自动清空该innerHTML属性的所有子引用。我怎样才能将孩子留在记忆中，以便以后能够克隆它并将其附加到父母身上？

示例 HTML：

<div id="parent">
    <div id="child">
    </div>
</div>

脚本：

var parent = document.querySelector('#parent', document);
var child = document.querySelector('#child', parent);

parent.innerHTML = '';
// at this point child.innerHTML is ALSO empty!!!
// I want to clone later the child back into the parent

如何让孩子留在记忆中？是child.outerHTML唯一的解决方案吗？

PS：在 IE 中（最多 10 个），没有 jQuery

Answer 1

你可以这样做：

var parent = document.querySelector('#parent', document),
    child = document.querySelector('#child', document);
parent.removeChild(child);
// Later you can return child to document:
parent.appendChild(child);

jsFiddle 的现场演示。

Answer 2

这看起来像是一个简单的引用与值的问题。

JSvar child = X返回对 DOM 的引用，而不是关联值的图。

要在子图被 innerHTML 设置清除之前保存子图的值，需要先复制它，包括在需要时深度克隆子图。

这里有一个解决损坏的 IE DOM 元素克隆的示例：http: //brooknovak.wordpress.com/2009/08/23/ies-clonenode-doesnt-actually-clone/