DOM增删改——JS

_洋

于 2022-04-07 12:39:27 发布

阅读量265

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/mantou_riji/article/details/124006888

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

方法	含义
appendChild()	把新的子节点添加到指定节点。
removeChild(）	删除子节点
replaceChild(）	替换子节点
insertBefore(）	在指定的子节点前面插入新的子节点
createElement(）	创建元素节点
createTextNode(）	创建元文本点
createAttribute(）	创建属性节点
getAttribute(）	返回指定的属性值
setAttribute()	把指定属性设置或修改为指定的值。

createElement(）：可以用于创建一个元素节点对象，它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,并将创建好的对象作为返回值返回。
createTextNode(）：可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回.
appendChild():向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点);
insertBefore(）:由父节点进行调用
可以在指定的子节点前插入新的子节点
语法： 父节点.insertBefore(新节点,旧节点);
replaceChild（）：可以使用指定的子节点替换已有的子节点
语法:父节点.replaceChild(新节点,旧节点);
removeChild（）：删除子节点
语法：父节点.removeChild(子节点);
parentNode：获取父元素
语法：对象.parentNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function myClick(idname,fun){
            var btn = document.getElementById(idname);
            btn.onclick = fun;
        }
         window.onload = function(){
            //创建广州结点
            myClick("btn1",function(){
               
                //1. 创建li元素节点
                var li = document.createElement("li");

                //2. 创建广州文本节点
                var text = document.createTextNode("广州");

                //3. 建立两者联系(认亲)
                li.appendChild(text);

                //4.将广州添加到city下
                var city = document.querySelectorAll("#city ul")[0];
                city.appendChild(li);

            });

            // 将广州添加到北京前面
            myClick("btn2",function(){
                // 创建广州
                var li = document.createElement("li");
                var text = document.createTextNode("广州");
                li.append(text);

                // 获取北京
                var bj = document.querySelector("#bj");

                // 插入
                var city = document.querySelectorAll("#city ul")[0];
                city.insertBefore(li,bj);
            });

            // 使用广州替换北京
            myClick("btn3",function(){
                var li =document.createElement("li");
                var text = document.createTextNode("广州");
                li.append(text);

                var city = document.querySelectorAll("#city ul")[0];
                city.replaceChild(li,bj);
            })

            // 删除北京
            myClick("btn4",function(){
                var bj = document.getElementById("bj");
               bj.parentNode.removeChild(bj);
            })

            // 修改首尔为昌平
            myClick("btn5",function(){
                var se = document.getElementById("se");
               se.innerHTML = "昌平";
            })

            // 使用innerHTML添加广州
            myClick("btn6",function(){
                var city = document.querySelectorAll("#city ul")[0];
                city.innerHTML += "<li>广州</li>";
            })

             // innerHTML和createElement结合使用添加添加广州
            myClick("btn7",function(){
                // 创建元素
                var li = document.createElement("li");
                li.innerHTML = "广州";
                // 将li添加到city中。
                var city = document.querySelectorAll("#city ul")[0];
                city.appendChild(li);
            })



        }


    </script>
</head>
<body>
<div id = "city">
    <ul>
        <li id = "bj">北京</li>
        <li id = "sh">上海</li>
        <li id = "dj">东京</li>
        <li id = "se">首尔</li>
    </ul>

</div>
    <button id = "btn1">点击添加广州元素节点</button>
    <br><br>
    <button id = "btn2">点击将广州添加到北京前面</button>
     <br><br>
    <button id = "btn3">点击将北京替换为广州</button>
     <br><br>
    <button id = "btn4">点击删除北京</button>
     <br><br>
    <button id = "btn5">点击将首尔换成昌平</button>  
     <br><br>
    <button id = "btn6">使用InnerHTML添加广州</button>  
      <br><br>
    <button id = "btn7">使用InnerHTML和createElement添加广州（推荐使用）</button>  
</body>
</html>

输出：
在这里插入图片描述

可以使用 innerHTML 和 createElement(）都可以添加元素，但各有优缺点：
innerHTML：添加元素时将之前的元素全部删除重新添加
createElement：添加元素太过麻烦。
所以我们采取折中的方法：

// createElement创建元素
var li = document.createElement("li");
// innerHTML添加文本
li.innerHTML = "广州";
// 将li添加到city中
var city = document.querySelectorAll("#city ul")[0];
city.appendChild(li);

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM增删改——JS

方法含义appendChild()把新的子节点添加到指定节点。removeChild(）删除子节点replaceChild(）替换子节点insertBefore(）在指定的子节点前面插入新的子节点createElement(）创建元素节点createTextNode(）创建元文本点createAttribute(）创建属性节点getAttribute(）返回指定的属性值setAttribute()把指定属性设置或修改为指定...
复制链接

扫一扫

专栏目录