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

最新推荐文章于 2024-08-11 00:22:53 发布

约德尔蒙

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量1.7k

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53181810

版权

Js 专栏收录该内容

63 篇文章 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>