用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中就都没有值了...
- 网上搜了很多都没发现解答，求大佬解惑.....
