作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上)
博客主页:苏凉.py的博客
系列总专栏:web前端基础教程
名言警句:海阔凭鱼跃,天高任鸟飞。
要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!
关注✨点赞收藏
在上几期我们说了DOM查询的操作,下面我们来一起看看DOM的增删改。
上期传送门:
DOM查询(上)
DOM查询(下)
将新的子节点添加到指定节点
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);
}
}
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>Documenttitle>
<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>