JavaScript之DOM增删改

最新推荐文章于 2021-11-25 22:21:24 发布

极客研究者

最新推荐文章于 2021-11-25 22:21:24 发布

阅读量152

点赞数

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

本文链接：https://blog.csdn.net/qq_34550459/article/details/105786345

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

插入节点:主要包括两种方法
1.appendChild(newChild):
向当前节点的子节点列表的末尾添加新的子节点
2.insertBefore(newChild,refChild):
在已有的子节点前插入一个新节点

替换节点:replaceChild()方法:可以将某个子节点替换为另一个
nodeObject.replaceChild(new_node,old_node)
如果替换成功,则返回被替换掉的节点,否则返回null

删除节点:
removeChild(node)方法:可以从子节点列表中删除某个节点
node:要删除的节点

Demo:

<!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>JS中节点元素的增删改</title>
    <link rel="stylesheet" href="../css/css2.css">
    <script>
        window.onload = function () {          
            var cityNode=document.getElementById('city');

            // 创建一个"广州"节点
            //1.创建li元素
            var gzLi= document.createElement('li');
            gzLi.setAttribute('class','gz');
            //2.设置元素的innerHtml
            gzLi.innerHTML="<span>广州</span>";




            //创建一个"广州"节点,添加到#city下
            var btn01 = document.getElementById('btn01');
            btn01.onclick = function () {
            // 3.将此li添加到city列的末尾
            cityNode.appendChild(gzLi);
            
            }

             //把广州节点添加到北京之前
             var btn02=document.getElementById('btn02');
             btn02.onclick=function(){
                 //2.获取北京节点
                 var bjNode=document.getElementById('bj');
                cityNode.insertBefore(gzLi,bjNode);
             }


             /*
             替换节点:replaceChild()方法:可以将某个子节点替换为另一个
             nodeObject.replaceChild(new_node,old_node)
             如果替换成功,则返回被替换掉的节点,否则返回null

             */
             //使用"广州"节点替换#bj节点
             var btn03=document.getElementById('btn03');
             btn03.onclick=function(){
                 //获取北京节点
                 var bjNode=document.getElementById('bj');
                 var replacedNode=cityNode.replaceChild(gzLi,bjNode);
                //  if(replacedNode!=null){
                //     alert('it had deleted!');
                //  }

             }
             
             /*
             删除节点:
             removeChild(node)方法:可以从子节点列表中删除某个节点
             node:要删除的节点
             */
             //删除#bj节点
             var btn04=document.getElementById('btn04');
             btn04.onclick=function(){
                //获取北京节点
                var bjNode=document.getElementById('bj');
                cityNode.removeChild(bjNode);
             }

             //读取#city内的HTML代码
             var  btn05=document.getElementById('btn05');
             btn05.onclick=function(){
                var htmls=cityNode.innerHTML;
                console.log("htmls:"+htmls);
             }

             //设置#bj内的HTML代码
             var btn06=document.getElementById('btn06');
             btn06.onclick=function(){
                //获取北京节点
                var bjNode=document.getElementById('bj');
                
                //设置节点内部的html代码
                bjNode.innerHTML="<span class='BJ'>北京(BJ)</span>";
             }


             //创建一个"广州"节点,添加到#city下
             var btn07=document.getElementById('btn07');
             btn07.onclick=function(){
                //使用innerHTML属性的方式,添加新节点
                cityNode.innerHTML+="<li><span class='gz'>广州</span></li>";

             }

        }
    </script>
</head>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

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

</html>

极客研究者

关注

0
点赞
踩
1

收藏

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

插入节点:主要包括两种方法1.appendChild(newChild):向当前节点的子节点列表的末尾添加新的子节点2.insertBefore(newChild,refChild):在已有的子节点前插入一个新节点替换节点:replaceChild()方法:可以将某个子节点替换为另一个nodeObject.replaceChild(new_node,old_node)如果替换成功,则...
复制链接

扫一扫

专栏目录