JS之DOM innerHTML与DOM方法的区别

  innerHTML

它会把原来的内容先清空，然后再添加新的内容，原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已（原本具有的事件不具存在）

 DOM方法
 会把新的内容追加到原来的内容里面，原来内容所具有的事件，依然会在

<ul id='color'>
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
            <li>pink</li>
</ul>


<script type="text/javascript">
var color=document.getElementById("color");
var lis=document.querySelectorAll("li");
var i;
for(i=0;i<lis.length;i++){
    lis[i].onclick=function(){
        alert(this.innerHTML); // 每点一个 返回li里的内容
    }
}
//先清空ul里的所有li 然后从新往文档里再插一遍
color.innerHTML+="<li>xubj</li>";
//DOM方法给color添加元素
var newLi=document.createElement("li");
newLi.innerHTML="xubj2";
color.appendChild(newLi);
//这种方法添加不会删除原来元素，往后追加一个