jQuery添加元素:
- prepend()在头部添加，添加的内容在被选标签的内部
- append()在尾部添加，添加的内容在被选标签的内部
- before()在头部天际，添加的内容在被选标签的外部
- after()在尾部添加，添加的内容在被选标签的外部
(重点是区分两种方法执行后结果的不同)
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p id="p1"> 文本体1 </p>
<p id="p2"> 文本体2 </p>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button id="btn1">append尾部</button>
<button id="btn3">prepend头部</button>
<button id="btn2">append追加列表</button>
<button id="btn4">before头部</button>
<button id="btn5">after尾部</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").append("<b>append</b>");
$("#p2").append("<b>append</b>");
});
$("#btn2").click(function(){
$("ul").append("<li>list4</li>");
});
$("#btn3").click(function(){
$("#p1").prepend("<b>prepend</b>");
$("#p2").prepend("<b>prepend</b>");
});
$("#btn4").click(function(){
$("#p1").before("<b>before</b>");
$("#p2").before("<b>before</b>");
});
$("#btn5").click(function(){
$("#p1").after("<b>after</b>");
$("#p2").after("<b>after</b>");
});
});
</script>
</body>
</html>
jQuery删除元素:
- remove()移除被选标签在内的所有元素，包括标签本身
- remove(参数)这里的参数是选择标签，例如
$("div").remove("#p")表示只能移除div标签中子元素是p标签的元素
- empty()清空被选标签的元素，即仅清除子元素
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<title></title>
<style>
div{
margin:10px auto;
padding:0 auto;
width:200px;
height:200px;
background-color:yellow;
border:none;
border:1px solid black;
border-radius:3px;
}
button{
display:block;
margin:5px auto;
}
</style>
</head>
<body>
<button id="btn1">移除div元素</button>
<button id="btn2">清空div元素</button>
<div id="div1">
<p>p文本</p>
<b>b文本</b>
</div>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").remove();
});
$("#btn2").click(function(){
$("#div1").empty();
});
});
</script>
</body>
</html>