jsDOM元素的创建-操作（creatEle）

￡神魔★判官ぃ 2022-07-15 12:07 174阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
    //-----------------------------dom元素的创建--------------------------
                //第一种创建方式：document.write();
                document.write("<li>我是document.write创建的</li>");
    
    
                //第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
                ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"
    
    
                //第三种：利用dom的api创建元素
                var newLi = document.createElement("li");
                newLi.innerHTML = "我是createElement创建的";
                //    console.log(newLi);
    
                //在父元素的最后面添加元素。
                //    ul.appendChild(newLi);
    
                //指定位置添加
                var li1 = document.getElementById("li1");
                ul.insertBefore(newLi,li1);
    
    
    
    //----------------------------------元素的操作----------------------------
                //document.write();不常用，因为容易覆盖原来的页面。
                //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
                //document.createElement;也是比较多的，指定数量的时候一般用它。
    
                //创建，添加，删除，替换
                var li2 = document.createElement("li");
                li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
                ul.appendChild(li2);
    
                //用insertBefore添加
                var li3 = document.createElement("li");
                li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
    
                //父节点.insertBefore(新节点，参照节点);
                ul.insertBefore(li3,li1);
    
    
                //删除，替换
                ul.removeChild(li3);
                
                //父节点.replaceChild(newNode,oldNode);
                ul.replaceChild(li3,li2);
    
                //克隆node.cloneNode(true);深层复制。
                for(var i=0;i<=3;i++){
                    var newLi = li3.cloneNode(true);
                    ul.appendChild(newLi);
                }
    
    </script>
    </body>
    </html>