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" ).click(function(){
$("#div1").prepend("<p>這是在前面新增的段落</p>");
});
這兩個都可以同時新增多個內容,這些內容可以使通過HTML、JQuery、DOM建立的
<body>
<div id="div1">
<hr/> //加個分界線使結果看的更清晰
</div>
<button id="btnApp">點選1</button>
<button id="btnPre">點選2</button>
</body>
<script>
$("#btnApp").click(function(){
var txt1 = "<p>姓名:</p>";
var txt2 = $("<p></p>").text("電話:");
var txt3 = document.createElement("p");
txt3.innerText = "住址";
$("#div1").append(txt1,txt2,txt3);
});
$("#btnPre").click(function (){
var txt1 = "<p>個人資訊:</p>";
var txt2 = $("<p></p>").text("e-mail:");
var txt3 = document.createElement("p");
txt3.innerText = "個人住址";
$("#div1").prepend(txt1,txt2,txt3);
});
</script>
(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>