老师，帮我看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
background-color: aqua;
margin: 0 auto;
padding-bottom: 40px;
}
ul{
width: 200px;
margin: 0 auto;
text-align: left;
background-color: antiquewhite;
padding-bottom: 50px;
}
ul li{
list-style: none;
background-color: orangered;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 50px;
}
.colors{
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
<button type="button">添加元素</button>
<button type="button">删除元素</button>
<ul>我是UL
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
</ul>
</div>
<script type="text/javascript">
var btn1=document.getElementsByTagName("button")[0];
var btn2=document.getElementsByTagName("button")[1];
btn1.onclick=function(){
var lis=document.querySelectorAll("li");
var uls=document.querySelector("ul");
var a=document.createElement("li");
uls.appendChild(a);
a.innerText="我是li"+(lis.length+1);
a.style.backgroundColor="#ADFF2F"
}
btn2.onclick=function(){
var lis=document.querySelectorAll("li");
var uls=document.querySelector("ul");
if(lis.length>0){
uls.removeChild(uls.lastChild);
}
}
var lis=document.querySelectorAll("li");
var uls=document.querySelector("ul");
</script>
</body>
</html>
我把这个获取的dom对象放置的位置不一样，为什么效果不一样？什么原因？
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星