元素的添加
（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>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
