【JavaScript】DOM增删改的操作-CFANZ编程社区

文章目录

在上几期我们说了DOM查询的操作，下面我们来一起看看DOM的增删改。

本期实现功能

增新一个子节点(appendChild)

将新的子节点添加到指定节点

window.onload = function(){
   document.getElementById('bt1').onclick = function(){
       //创建一个li节点
       var addli1 = document.createElement('li');
       //创建一个城市文本节点
       var citytext = document.createTextNode('浙江');
       //将文本节点设置为li节点的字节点
       addli1.appendChild(citytext);
       //获取ul
       var ul = document.getElementById('uls');
       //将li设置为ul的子节点
       ul.appendChild(addli1);
   }
}

在指定的子节点前添加一个新节点(insertBefore)

window.onload = function(){
 	 document.getElementById('bt2').onclick = function(){
	  //创建一个li节点
	    var addli2 = document.createElement('li');
	      //创建一个文本节点
	    var citytext = document.createTextNode('四川');
	    //将文本节点设置为li的子节点
	    addli2.appendChild(citytext);
	    //获取贵阳的li节点
	    var guiyang = document.getElementById('guiyang');
	    //获取ul节点
	    var ul = document.getElementById('uls');
	    //在贵阳之前插入li
	    ul.insertBefore(addli2,guiyang);
	}
}

替换子节点(replaceChild)

window.onload = function(){
  document.getElementById('bt3').onclick = function(){
     //创建一个li节点
       var addli2 = document.createElement('li');
       //创建一个文本节点
       var citytext = document.createTextNode('江西');
       //将文本节点设置为li的子节点
       addli2.appendChild(citytext);
       //获取贵阳的li节点
       var guiyang = document.getElementById('guiyang');
       //获取ul节点
       var ul = document.getElementById('uls');
       //替换贵阳子节点
       ul.replaceChild(addli2,guiyang);
   }
}

删除指定节点(removeChild)

window.onload = function(){
   document.getElementById('bt4').onclick = function(){
        //找到天津这个节点
        var tj = document.getElementById('tj');
        //获取它的父节点
        var parent =document.getElementById('uls');
        //删除
        parent.removeChild(tj);
   }
}

优化：与innerHTML结合使用修改元素（更高效）

window.onload = function(){
   document.getElementById('bt5').onclick = function(){
       //创建一个li节点
       var li = document.createElement('li');
       //使用innerHTML写入文本
       li.innerHTML="江苏";
       //获取父节点
       var ul = document.getElementById('uls')
       //将设置为ul的子节点
       ul.appendChild(li);
   }
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            document.getElementById('bt1').onclick = function(){
                //创建一个li节点
                var addli1 = document.createElement('li');
                //创建一个城市文本节点
                var citytext = document.createTextNode('浙江');
                //将文本节点设置为li节点的字节点
                addli1.appendChild(citytext);
                //获取ul
                var ul = document.getElementById('uls');
                //将li设置为ul的子节点
                ul.appendChild(addli1);
            }

            document.getElementById('bt2').onclick = function(){
                //创建一个li节点
                var addli2 = document.createElement('li');
                //创建一个文本节点
                var citytext = document.createTextNode('四川');
                //将文本节点设置为li的子节点
                addli2.appendChild(citytext);
                //获取贵阳的li节点
                var guiyang = document.getElementById('guiyang');
                //获取ul节点
                var ul = document.getElementById('uls');
                //在贵阳之前插入li
                ul.insertBefore(addli2,guiyang);
            }

            document.getElementById('bt3').onclick = function(){
                //创建一个li节点
                var addli2 = document.createElement('li');
                //创建一个文本节点
                var citytext = document.createTextNode('江西');
                //将文本节点设置为li的子节点
                addli2.appendChild(citytext);
                //获取贵阳的li节点
                var guiyang = document.getElementById('guiyang');
                //获取ul节点
                var ul = document.getElementById('uls');
                //替换贵阳子节点
                ul.replaceChild(addli2,guiyang);
            }

            document.getElementById('bt4').onclick = function(){
                //找到天津这个节点
                var tj = document.getElementById('tj');
                //获取它的父节点
                // var parent =document.getElementById('uls');
                // //删除
                // parent.removeChild(tj);

                //另外一种方法
                tj.parentNode.removeChild(tj);
            }

            document.getElementById('bt5').onclick = function(){
                //创建一个li节点
                var li = document.createElement('li');
                //使用innerHTML写入文本
                li.innerHTML="江苏";
                //获取父节点
                var ul = document.getElementById('uls')
                //将设置为ul的子节点
                ul.appendChild(li);
            }
        }
    </script>

    <style>
        
        .box{
            display: inline-block;
            background-color: lightblue;
        }
        li{
            display: inline-block;
            background-color: lightgoldenrodyellow;
            margin: 10px;
        }
        .box2{
            display: inline-block;
          } 
        button{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>常驻城市：</p>
        <ul id="uls">
            <li id="tj">天津</li>
            <li id="guiyang">贵阳</li>
            <li>重庆</li>
            <li>北京</li>
        </ul>
    </div>
    <div class="box2">
        <button id="bt1">添加一座城市</button>
        <button id="bt2">在贵阳这个城市之前加入一座城市</button>
        <button id="bt3">加一个新的城市替换贵阳</button>
        <button id="bt4">删除天津</button>
        <button id="bt5">使用innerHTML修改</button>
    </div>
</body>
</html>