DOM2

1.創建節點輸出內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="" id="" value="" />
        <input type="button" name="" id="" value="新建" />
        <ul>

        </ul>
    </body>
    <script type="text/javascript">
        //新建一個文本
        (function(){
            var btn=document.querySelectorAll('input')[1];
            //console.log(btn);
            var text=document.querySelectorAll('input')[0];
            var oUl=document.querySelector('ul');
            btn.οnclick=function(){
                //createElement創建//創建一個li變量名爲oli;
                var oLi=document.createElement('li');
                //獲取到父級下的所有子級元素;
                var aLi=oUl.getElementsByTagName('li');
                //
                oLi.innerHTML=text.value;
                //aLi是個數組,它的長度大於0,後輸入的才能放到上面;
                if(aLi.length>0){
                    //如果想要後輸入的顯示在最上面,就用insertBefore(插入的元素,要插入的位置)
                    oUl.insertBefore(oLi,aLi[0]);
                }else{
                    //父級.appendChild.子級//創建的li給ul;
                    //插入的元素li
                    oUl.appendChild(oLi);
                }
            }
        })();
    </script>
</html>

2.插入元素

insertBefore(節點、原有節點在已有元素前插入)

3.刪除DOM

removeChild(節點,刪除一個節點)

發佈了51 篇原創文章 · 獲贊 19 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章