JS基础-DOM增删改

最新推荐文章于 2024-07-13 15:54:45 发布

linqunbin

最新推荐文章于 2024-07-13 15:54:45 发布

阅读量113

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/90678943

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            function myClick(idStr, fun){
                var btn = document.getElementById(idStr);
                btn.onclick = fun;
            };
            // 创建一个"广州"节点,添加到#city下
            myClick('btn01', function(){
                // 创建广州节点<li>广州</li>

                // document.createElement()
                // 可以用于创建一个元素节点对象,它需要一个标签名作为参数,将会根据该标签名创建元素节点对象.
                // 并将创建好的对象作为返回值.
                // 创建li元素节点
                var li = document.createElement('li');

                // 创建文本节点:document.createTextNode()
                // 可以用来创建一个文本节点对象
                // 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
                // 创建广州文本节点
                var gzText = document.createTextNode('广州');

                // 将gzText设置li的子节点
                // appendChild()
                //  -向一个父节点中添加一个新的子节点
                //  -用法:父节点.appendChild(子节点);
                li.appendChild(gzText);

                // 获取id为city的节点:
                var city = document.getElementById('city');

                // 将广州添加到city下
                city.appendChild(li);
            });
            


            // 将"广州"节点,插入到#bj前面
            myClick('btn02', function(){
                // 创建广州
                var li = document.createElement('li');
                var gzText = document.createTextNode('广州');
                li.appendChild(gzText);

                // 获取id为bj的节点
                var bj = document.getElementById('bj');
                
                // 获取city
                var city = document.getElementById('city');
                /*
                    insertBefore()
                        -可以在指定的子节点前插入新的子节点
                        -语法:
                            父节点.insertBefore(新节点,旧节点);
                */
                city.insertBefore(li, bj);
            });

            
            // 使用广州节点,替换#北京节点
            myClick('btn03', function(){
                var li = document.createElement('li');
                var gzText = document.createTextNode('广州');
                li.appendChild(gzText);

                var bj = document.getElementById('bj');
                var city = document.getElementById('city');
                /*
                    replaceChild()
                    -可以使用指定的子节点替换已有的子节点.
                    -语法:父节点.replaceChild(新节点, 旧节点);
                */
                city.replaceChild(li, bj);
            });

            // 删除#bj节点
            myClick('btn04', function(){
                var bj = document.getElementById('bj');
                var city = document.getElementById('city');
                /*
                    removeChild()
                        可以删除一个子节点
                        语法:父节点.removeChild(子节点);
                */
                // city.removeChild(bj);
                // 下面这种方法比上面方法更加方便,通过parentNote获取父节点,然后在删除这个子节点.
                bj.parentNode.removeChild(bj);
            });

            // 读取#city内的html代码
            myClick('btn05', function(){
                var city = document.getElementById('city');
                alert(city.innerHTML);
            });

            // 设置#bj内的html代码
            myClick('btn06', function(){
                var bj = document.getElementById('bj');
                bj.innerHTML = '福州';
            });

            // 向city中添加连江
            // 使用innerHTML也可以完成DOM的增删改的相关操作
            city.innerHTML += "<li>连江</li>";
            // 这种方式与appendChild()相比动作比较大,会把原来代码删除重新添加,比较消耗资源.
            // 一般我们会两种方式结合使用
            myClick('btn07', function(){
                var city = document.getElementById('city');
                var li = document.createElement('li');
                li.innerHTML = '连江';
                city.appendChild(li);
            });
        };
    </script>
</head>
<body>
    <div id="total">
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
    </div>

    <div id="btnList">
        <button id="btn01">创建"广州"节点,添加到#city下</button>
        <button id="btn02">将"广州"节点,插入到#bj前面</button>
        <button id="btn03">使用"广州"节点,代替#bj节点</button>
        <button id="btn04">删除#bj节点</button>
        <button id="btn05">读取#city内的html代码</button>
        <button id="btn06">设置#bj内的html代码</button>
        <button id="btn07">创建"连江"节点,添加到#city下</button>
    </div>

</body>
</html>

linqunbin

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录