发布时间：2023-01-13 20:30
视频链接：
JS基础-DOM增删改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM增删改</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#boddy{
background-color: #f0f0f0;
margin: 0 15%;
}
#inner{
text-align: center;
}
#fru li{
display: inline-block;
width: 100px;
height: 30px;
background-color: cornflowerblue ;
line-height: 30px;
color: white;
border: 1px solid cornflowerblue;
border-radius: 0 10px ;
}
#btns{
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function(){
myClick("btn01",function(){
//创建樱桃节点樱桃
var li=document.createElement("li");
//创建樱桃文本节点 文本内容是参数
var ytText=document.createTextNode("樱桃");
//将樱桃文本节点添加成li的子节点
li.appendChild(ytText);
//获取id为fru的结点
var fru=document.getElementById("fru");
fru.appendChild(li);
//添加到fruit下面
});
myClick("btn02",function(){
//创建一个樱桃
var li=document.createElement("li");
//创建樱桃文本节点 文本内容是参数
var ytText=document.createTextNode("樱桃");
//将樱桃文本节点添加成li的子节点
li.appendChild(ytText);
//获取id为西瓜的结点
var xg=document.getElementById("xg");
var fru=document.getElementById("fru");
/**
* 在指定子节点前插入新的子节点
* 父节点.insertBefore(新结点,旧结点);
*/
fru.insertBefore(li,xg);
});
/**
* 使用樱桃替换xg结点
*/
myClick("btn03",function(){
var li=document.createElement("li");
//创建樱桃文本节点 文本内容是参数
var ytText=document.createTextNode("樱桃");
//将樱桃文本节点添加成li的子节点
li.appendChild(ytText);
//获取id为西瓜的结点
//获取id为西瓜的结点
var xg=document.getElementById("xg");
var fru=document.getElementById("fru");
/**
* replaceChild()可以使用指定子节点替换新结点
*/
fru.replaceChild(li,xg);
});
/**
*删除西瓜xg结点
*/
myClick("btn04",function(){
var xg=document.getElementById("xg");
var fru=document.getElementById("fru");
xg.parentNode.removeChild(xg);
});
/*
读取#fru内的HTML代码
*/
myClick("btn05",function(){
var fru=document.getElementById("fru");
alert(fru.innerHTML);
});
/**
* 获取xg内的HTML代码
*/
myClick("btn06",function(){
var xg=document.getElementById("xg");
alert(xg.innerHTML);//读取
xg.innerHTML="榴莲";//修改
});
myClick("btn07",function(){
//向fru中添加火龙果
var fru=document.getElementById("fru");
//用这个添加贼快 但不太建议这么用
//fru.innerHTML+="火龙果 "; //因为更新了所有的li 可能造成绑定好的事件失灵
//一般两种方法结合使用 向下面这个样子
var li=document.createElement("li");
li.innerHTML="火龙果";
fru.appendChild(li);
});
}
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
</script>
</head>
<body>
<div id="boddy">
<div id="inner">
<p>你最喜欢哪种水果~</p>
<ul id="fru" >
<li id="xg">西瓜</li>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
</div>
<div id="btns">
<button id="btn01">添加一个樱桃</button>
<button id="btn02">樱桃放到西瓜前面</button>
<button id="btn03">移除一个西瓜，换成樱桃</button>
<button id="btn04">移除一个西瓜</button>
<button id="btn05">读取#fru内的HTML代码</button>
<button id="btn06">读取xg内的HTML代码</button>
<button id="btn07">向fru中添加火龙果</button>
</div>
</div>
</body>
</html>