javascript中DOM的增删改查

最新推荐文章于 2022-05-18 19:42:36 发布

木里先森

最新推荐文章于 2022-05-18 19:42:36 发布

阅读量742

点赞数 2

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/mr_muli/article/details/79051728

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

javascript中DOM的增删改查

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>NodeCRUD</title>
        <style>
            #div_1,#div_2,#div_3,#div_4{
                border:1px blue solid;
                width:100px;
                height:80px;
            }
            #div_1{
                background:pink;
            }
            #div_2{
                background:orange;
            }
            #div_3{
                background:blue;
            }
            #div_4{
                background:red;
            }
        </style>

    </head>
    <body>
        <div id="div_1"></div>
        <div id="div_2">div区域2</div>
        <div id="div_3">div区域3</div>
        <div id="div_4">div区域4</div>
        <hr />

        <input type="button" value="创建并添加节点" onclick="addNode()"/>
        <input type="button" value="删除节点" onclick="deleteNode()"/>
        <input type="button" value="替换节点" onclick="updateNode()"/>
        <input type="button" value="克隆节点" onclick="copyNode()"/>

    </body>
        <script type="text/javascript">
            function addNode(){
                //1.创建a标签 <a></a>
                //createElement(name) 方法可创建元素节点。
                //此方法可返回一个 Element 对象。
                //新创建的属性的名称。
                var a=document.createElement("a");
                //2.为创建的a标签添加属性
                a.setAttribute("href","http://www.baidu.com");
                //3.为a标签添加标签体
                a.innerHTML="点我";
                //4.找到div标签
                var div_1=document.getElementById("div_1");
                //5.添加
                div_1.appendChild(a);
            }

            function deleteNode(){
                //1.获得要删除的div
                var div_2=document.getElementById("div_2");
                //2.火大div的父元素
                var parent=div_2.parentNode;
                //3.通过父元素删除子节点
                parent.removeChild(div_2);              
            }

            function updateNode(){
                //1.获得被替换的div
                var div_3=document.getElementById("div_3");
                //2.创建img元素对象<img />
                var img=document.createElement("img");
                //3.为img添加属性
                img.setAttribute("src","mn.jpg");
                //4.找父元素
                var parent=div_3.parentNode;
                //5.替换
                parent.replaceChild(img,div_3);
            }

            function copyNode(){
                //1.获得被替换的div
                var div_4=document.getElementById("div_4");
                //2.调用克隆方法cloneNode(include_all) 方法创建指定节点的精确拷贝。
                //此方法返回被克隆的节点。
                //include_all---必需。如果这个布尔参数设置为 true，被克隆的节点会复制原始节点的所有子节点。
                var div_4_copy=div_4.cloneNode(true)
                //3.获得父节点
                var parent=div_4.parentNode;
                //4.添加到 最后一个div之前
                //div_4.appendChild(div_4_copy);
                //insertBefore(new_node,existing_node) 方法在已有的子节点之前插入一个新的子节点。
                //该方法返回这个新的子节点。
                parent.insertBefore(div_4_copy,div_4)

            }
        </script>
</html>