Dom-对节点的增删改查，替换

最新推荐文章于 2020-09-06 22:37:57 发布

qq_34734520

最新推荐文章于 2020-09-06 22:37:57 发布

阅读量398

点赞数

分类专栏： java之DOM

本文链接：https://blog.csdn.net/qq_34734520/article/details/51585126

版权

java之DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

web-strom

Dom-对节点的增删改查，替换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            border: #00ff00 1px solid;
            width: 200px;
            padding: 30px;
            margin: 10px;
        }
        #div-1{
            background-color: #00ccff;
        }
        #div-2{
            background-color: #FFccff;
        }
        #div-3{
            background-color: #cc00ff;
        }
        #div-4{
            background-color: #00ff00;
        }
    </style>
    <script>
        //创建并添加节点
        //在div-1中添加一个文本节点
        function crtAndAdd(){
            //1.创建节点
            var oTextNode=document.createTextNode("这是一个新文本");
            //2.获取div-1节点
            var oDivNode=document.getElementById("div-1");
            //3.将文本添加到div-1节点中
            oDivNode.appendChild(oTextNode);
        }
        function crtAndAdd2(){
            //1.创建一个按钮节点
            var oButNode=document.createElement("input");
            oButNode.type="button";
            oButNode.value="一个新按钮";
            //2.获取div节点
            var oDivNode=document.getElementById("div-1");
            //3.将按钮节点添加到div-1节点中
            oDivNode.appendChild(oButNode);
        }
        //通过另外一种方法实现完成节点添加
        function crtAndAdd3(){
            //1.获取div节点
            var oDivNode=document.getElementById("div-1");
            oDivNode.innerHTML="<input type='button' value='有个按钮'>";
            oDivNode.innerHTML="<a href=''>有个超链接</a>";
        }//删除节点
        function delNode(){
            //1.获取div-2节点
            var oDivNode=document.getElementById("div-2");
            //2.使用div节点删除方法删除节点
//            oDivNode.removeNode(true);//删除操作，很少使用
            oDivNode.parentNode.removeChild(oDivNode);
        }
        //修改节点,div-3节点替换div-1节点
        function updateNode(){
            var oDivNode1=document.getElementById("div-1");
            var oDivNode3=document.getElementById("div-3");
            //oDivNode1.replaceNode(oDivNode3);
            oDivNode1.parentNode.removeChild(oDivNode3,oDivNode1);
        }
        //用div-3替换div-1,并保留div-3节点,其实就是对div-3进行克隆
        function cloneDemo(){
            var oDivNode1=document.getElementById("div-1");
            var oDivNode3=document.getElementById("div-3");
            var oCopyDiv3=oDivNode3.cloneNode(true);
            oDivNode1.parentNode.replaceChild(oCopyDiv3,oDivNode1);
        }
    </script>
</head>
<body>
    <input type="button" value="创建并添加节点" οnclick="crtAndAdd3()"/>
    <input type="button" value="删除节点" οnclick="delNode()"/>
    <input type="button" value="修改节点" οnclick="updateNode()"/>
    <input type="button" value="克隆节点" οnclick="cloneDemo()"/>
    <div id="div-1">

    </div>

    <div id="div-2">
        好好学习，天天向上
    </div>

    <div id="div-3">
        div区域演示文字
    </div>

    <div id="div-4">
        节点的增删改查
    </div>
</body>
</html>

qq_34734520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom-对节点的增删改查，替换

web-stromDom-对节点的增删改查，替换 div{ border: #00ff00 1px solid; width: 200px; padding: 30px; margin: 10px; } #di
复制链接

扫一扫