jQuery添加\删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery添加和删除元素</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//添加元素
//元素内部添加
//append()在被选元素的结尾插入内容;
// $('button').click(function(){
// $('div').append('<p class="text"></p>')
// })
//prepend()在被选元素的开头插入内容;
// $('button').click(function(){
// $('div').prepend('<p class="text">123</p>')
// })
//元素外部添加
//after()在被选元素之后插入内容;
// $('button').click(function(){
// $('div').after('<div class="div"><p class="text"><button>点击</button></p></div>')
// })
//before()在被选元素之前插入内容;
// $('button').click(function(){
// $('div').before('<div class="div"><p class="text">123</p></div>')
// })
//删除元素:
//remove() 方法删除被选元素及其子元素;
// $('button').click(function(){
// $('div').remove()
// })
//empty() 方法删除被选元素的子元素;
$('button').click(function(){
$('div').empty()
})
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.div{width:600px;margin:20px auto;text-align: center;padding: 10px;border:1px solid #ccc;}
.text{height:50px;line-height: 50px;background:#9BF25A;margin-bottom: 10px;}
</style>
</head>
<body>
<!-- <div class="div">
<p class="text"> <button>点击</button></p>
</div> -->
<div class="div">
<p class="text"></p>
<button>点击</button>
</div>
</body>
</html>
