JQuery DOM元素的刪除和新增
阿新 • • 發佈：2019-02-04
元素的新增
（1）append()：在元素的最後面新增內容
（2）prepend()：在元素的最前面新增內容
<div id="div1"></div>
<button id="btnAtn">點選從前面新增</button>
<button id="btnApp">點選從後面新增</button>
</body>
$("#btnApp").click(function(){
$("#div1").append("<p>這是在後面新增的段落</p>");
});
$("#btnAtn" 這兩個都可以同時新增多個內容，這些內容可以使通過HTML、JQuery、DOM建立的
<body>
<div id="div1">
<hr/> //加個分界線使結果看的更清晰
</div>
<button id="btnApp">點選1</button>
<button id="btnPre">點選2</button>
</body> （3）after()和brfore()：
兩組新增的區別：append()和prepend()新增後成為了其子元素
after()和brfore()新增後成為了其兄弟元素
var txtAfter = "<p>這是通過after新增的</p>";
$("#div1").after(txtAfter);元素的刪除
remove()：刪除的是被選元素及其子元素，它還有過濾刪除的作用，可以刪除指定元素，它的引數指定元素的名字
enpty()：刪除的是子元素
<style>
div{
width: 500px;
height: 200px;
background-color: plum;
}
</style>
</head>
<body>
<div id="div1">
<p>我是div1的內容1</p>
<p class="p2">我是div1的內容2</p>
<p>我是div1的內容3</p>
<p class="p2">我是div1的內容4</p>
</div>
<div id="div2">
<p>我是div2的內容</p>
</div>
<button id="delDiv1">刪除div1</button>
<button id="delDiv2">刪除div2</button>
</body>
<script>
$("#delDiv1").click(function(){
$("p").remove(".p2");//刪除的是所有p標籤中class名為“p2”的元素
});
$("#delDiv2").click(function(){
$("#div2").empty();
});
</script>