??作者简介：苏凉（专注于网络爬虫、数据分析，正在学习前端） ??主页：苏凉.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/span>(){
//创建一个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)
语法：
父节点.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); //获取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>