作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
博客主页：苏凉.py的博客
系列总专栏：web前端基础教程
名言警句：海阔凭鱼跃，天高任鸟飞。
要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
关注✨点赞收藏

文章目录

    • 本期实现功能
    • 增新一个子节点(appendChild)
    • 在指定的子节点前添加一个新节点(insertBefore)
    • 替换子节点(replaceChild)
    • 删除指定节点(removeChild)
    • 优化：与innerHTML结合使用修改元素（更高效）
    • 完整代码

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

上期传送门：
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)

语法：父节点.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');//在贵阳之前插入liul.insertBefore(addli2,guiyang);}}

替换子节点(replaceChild)

语法：父节点.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)

语法：父节点.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);//获取ulvar 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');//在贵阳之前插入liul.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>