IE踩坑：innerHtml置空后，之前保存的其内部元素丢失

用js原生写日历的时候，为了兼容IE9+，踩了很多坑，其中一个就是innerHtml的问题。

简要描述：

• 当时的需求：一个父元素中有很多子元素，我只需要其中的某一个元素，其他元素丢弃。

• 想到的解决方案：先将子元素保存，然后将父元素innerHtml置为空，然后再将子元素加入。

• 结果：在Chrome、Firfox中无问题，在IE中无效，IE中保存的子元素其innerHtml会丢失…（IE测试版本为9,10,11都无效）

测试代码1：

• index.html部分

<div id="demo">
    <div id="test">12345</div>
</div>

• test.js

var demo = document.getElementById("demo"),
    child = demo.firstElementChild;
console.log(child);  // 置空前
demo.innerHTML = "";
console.log(child);   // 置空后
demo.appendChild(child);
console.log(demo);

测试结果1：



测试代码2：

• 该测试中test.js未变，改了一下html中的结构

<div id="demo">
    <div id="test">
        <div>
            dsfjdsoi
        </div>
    </div>
</div>

测试结果2：



结论:

• 对比两次发现，有点诡异啊…Chrome、firfox完全满足预期，IE就有点不太懂了，测试1的时候在未置空前至少div中是还有值的，在测试2中就都没有值了…
• 网上搜了很多都没发现解答，求大佬解惑…