【已解决】JavaScript innerHTML 的问题

 

昨天（2016-08-17）遇到一个问题：

1 window.onload = function () {
2     var all = document.getElementById("all")
3     all.onclick = function () {
4         var h = document.createElement("div");
5         h.style.cssText = " 100px; height: 100px; ";
6         all.innerHTML = "Hello!";
7         all.appendChild(h);
8     }
9 }

第6行，第7行互换时，appendChild() 不工作。

 

今天偶然间大悟，innerHTML 的机制就是改变父元素的子元素内容。

应该使用 parent.innerHTML += ""; 避免已经存在的内容被重新改写。

 

【总结】出现问题的原因：基础知识不牢固。