<button>點我</button>
<script>
    document.write("<li class=‘kk‘>生活</li>")
</script>
<button>點我</button>

弊端：把原來的內容替換掉

var but=document.getElementsByTagName("button")[0];
    //console.log(document.write);是一個函數
    but.onclick=function () {
        document.write("<li class=‘kk‘>生活</li>");
    }

　2、事件源.innerHTML +="<li></li>"(經常用，寫上 + 號，原來的內容不會被替換)　

ul.innerHTML+="<li class=‘kk‘>生活</li>"

//利用dom的api創建元素  把創建的元素放在變量裏
    var newLi=document.createElement("li
 
");
    var newL=document.createElement("li");
    //賦值
        newLi.innerHTML="我是createElement創建的";
        newL.innerHTML="我是appendChild創建的";
    //添加到ul原來裏面
        ul.appendChild(newL);
    //指定位置添加
    var firUl=ul.firstElementChild || ul.firstChild;
        ul.insertBefore(newLi,firUl)

ul.removeChild(li3)

2、replaceChild（"新節點"，“舊節點”）替換節點（用的少）

ul.replaceChild(li3,li2)

3、克隆node.cloneNode(true)

//克隆li2標簽 li2.cloneNode(true);深層復制。
    for(var i=0; i<3; i++){
        var clLi=li2.cloneNode(true);
        ul.appendChild(clLi)
    }

案例

點擊按鈕添加li列表，鼠標放上去高亮顯示（鼠標離開也會有一個亮）

//需求:點擊列表，添加四大美女，然後鼠標放到誰上面，誰高亮顯示
        //思路：創建一個數組，添加內容。利用for循環創建li標簽添加到ul裏面
        //步驟：（指定多少個元素的創建最好用for循環）
        var but=document.getElementsByTagName("button")[0];
        var arr=["昭君","西施","貴妃","貂蟬"];
        var ul=document.getElementsByTagName("ul")[0];
        but.onclick=function(){
            ul.innerHTML="";//只添加一次 原理，每次循環清空了在添加
            for(var i=0; i<arr.length; i++){
                var li=document.createElement("li");
                li.innerHTML=arr[i];
                ul.appendChild(li);
            }
            //獲取所有的Li標簽然後，為他綁定事件，排他思想，高亮顯示
            var liArr=ul.children;
            for(var i=0; i<liArr.length; i++){
                liArr[i].onmouseover=function(){
                    for(var j=0; j<liArr.length; j++){
                        liArr[j].style.background=""
                    }
                    this.style.background="red"
                }
            }
        }

在線用戶

DOM元素