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：

Chrome结果Firefox结果IE结果，当前为IE11

测试代码2：

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

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

测试结果2：

Chrome结果Firefox结果IE结果，当前为IE11

结论:

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