js基础——DOM增删改

最新推荐文章于 2023-03-29 13:15:00 发布

jwz934738949

最新推荐文章于 2023-03-29 13:15:00 发布

阅读量123

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/100187323

版权

javascript基础专栏收录该内容

36 篇文章 1 订阅

订阅专栏

1、document.createElement()：创建元素节点对象，它需要一个标签作为参数，并且返回创建好的对象；

2、document.createTextNode()：创建文本节点对象，它需要一个文本内容作为参数，并且返回创建好的对象；

3、appendChild()：向一个父节点添加一个子节点。

用法：父节点.appendChild(子节点)；

4、insertBefore()：在指定的子节点前插入新节点。

用法：父节点.insertBefore(新节点，旧节点)；

5、replaceChild()：用指定的子节点替换已有的子节点。

用法：父节点.replaceChild(新节点，旧节点)；

6、removeChild()：删除子节点。

用法：父节点.removeChild(子节点)；

常用：子节点.parentNode.removeChild(子节点)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
    <script>
        window.onload = function () {
            MyClick("b1", function () {
                var ul = document.getElementsByTagName("ul");
                //创建新的li节点
                var li = document.createElement("li");
                //设置li的内容
                li.innerHTML = "重庆";
                //把li作为ul的子节点
                ul[0].appendChild(li);
            });

            MyClick("b2", function () {
                //用四川替换北京
                var ul = document.getElementsByTagName("ul");
                var LI = document.querySelector("li");
                //创建新的li节点
                var li = document.createElement("li");
                //设置li的内容
                li.innerHTML = "四川";
                ul[0].replaceChild(li, LI);
            });

            MyClick("b3", function () {
                //删除北京
                var LI = document.querySelector("li");
                LI.parentNode.removeChild(LI);
            });

            MyClick("b4", function () {
                //插入浙江在武汉之前
                var ul = document.getElementsByTagName("ul");
                var LI = document.querySelectorAll("li");
                //创建新的li节点
                var li = document.createElement("li");
                //设置li的内容
                li.innerHTML = "浙江";
                ul[0].insertBefore(li, LI[2]);
            });

            function MyClick(id, fun) {
                var bn = document.getElementById(id);
                bn.onclick = fun;
            }
        }

    </script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>武汉</li>
    <li>江苏</li>
    <li>广州</li>
</ul>
<button id="b1">添加城市</button>
<button id="b2">替换城市</button>
<button id="b3">删除城市</button>
<button id="b4">插入城市</button>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

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

1、document.createElement()：创建元素节点对象，它需要一个标签作为参数，并且返回创建好的对象；2、document.createTextNode()：创建文本节点对象，它需要一个文本内容作为参数，并且返回创建好的对象；3、appendChild()：向一个父节点添加一个子节点。用法：父节点.appendChild(子节点)；4、insertBefore()：...
复制链接

扫一扫