如何保存父 innerHTML 属性设置为空字符串的元素的 DOM 引用(在 IE 中)

Question

在IE中，当设置DOM元素的innerHTML属性时，这会自动清空所有子引用的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

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

JS var child = X返回对 DOM 的引用 - 而不是关联值的图形。

要在子图被 innerHTML 设置擦除之前保存其值，需要先复制它，包括根据需要深度克隆子图。

这里有一个解决损坏的IE DOM元素克隆的示例：http://brooknovak.wordpress.com/2009/08/23/ies-克隆节点-实际上不是克隆/

Answer 2

你可以做这样的事情：

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的现场演示。