<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div的添加和删除及相关操作</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<style>
#one{
border: solid 1px rgb(171,152,103);
width: 400px;
height: 400px;
float: left;
}
#two{
border: solid 1px rgb(171,152,103);
width: 400px;
height: 400px;
float: left;
margin-left:50px ;
margin-right: 50px;
}
#three{
border: solid 1px red;
width: 200px;
height: 200px;
margin: 50px 50px;
}
#six{
border: solid 1px red;
width: 200px;
height: 200px;
margin: 50px 50px;
}
button{
margin-top: 50px;
}
</style>
</head>
<body>
<div id="one">
<div id="three" class="four five">
</div>
</div>
<div id="two">
<div id="six" class="four five">
<div id="seven">星期六</div>
</div>
</div>
<button onclick="methodOne()">添加</button>
<button onclick="methodTwo()">删除</button>
<button onclick="methodThree()">判断</button>
<script>
//添加div
function methodOne(){
$("#three").append("<div>星期五</div>");
}
//移除div
function methodTwo(){
$("#seven").remove();
}
function methodThree(){
//判断div是否存在
console.log("div存在时");
console.log($("#one"));
console.log("div不存在时");
console.log($("#eight"));
//一般通过长度判断
console.log("存在:"+$("#one").length);
console.log("不存在:"+$("#eight").length);
//当class相同,通过上一级div的id判断
console.log($("#one .four").length);
console.log($("#two #seven").length);
}
</script>
</body>
</html>
275
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
