jQuery添加/删除元素
2018-02-02 本文已影响88人
GA_
添加
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery添加/删除元素</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p>操作我</p>
<button type="button" id="button1">1、追加</button>
<button type="button" id="button2">2、从头追加</button>
<button type="button" id="button3">3、后面追加</button>
<div id="div1">
<button type="button" id="button4">4、删除p标签</button>
<button type="button" id="button5">5、删除button标签</button>
</div>
<script>
$("#button1").click(function() {
var txt1 = "+追加的文本-1";
var txt2 = "<p>+追加的文本-2</p>";
var txt3 = $("<p></p>").text("+追加的文本-3");
var txt4 = document.createElement("p").innerHTML = "+追加的文本-4";
$("p").append(txt1, txt2, txt3, txt4);
})
$("#button2").click(function() {
// 001
$("p").prepend("我才是开始+");
// 002
$("p").before("又添加了开始+");
})
$("#button3").click(function() {
$("p").after("+追尾");
})
$("#button4").click(function() {
$("p").remove();
})
$("#button5").click(function() {
// 001
// $("button").remove();
// 002
$("button").remove("#button2");
})
</script>
</body>
</html>
