您当前的位置: jQuery - 元素的添加、删除
1. 添加新的 HTML 内容
用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
2. 删除元素/内容
用于删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）(直接删除)
empty() - 从被选元素中删除子元素 (保留当前元素，删除子元素)
//案例：元素的添加、删除
<html>
<head>
<meta charset="UTF-8">
<title>dom 增加、删除元素</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
</head>
<script type="text/javascript">
$(function(){ //文档就绪函数
//增加元素
$("#btn1").click(function(){
$("p").append(" 今天周四");
});
$("#btn2").click(function(){
$("ol").append("<li>新增列表</li>");
});
//删除元素
$("#btn3").click(function(){
$("#div1").remove();
});
//清空元素
$("#btn4").click(function(){
$("#div1").empty();
});
});
</script>
<body>
<fieldset id="test01">
<legend>1.增加元素</legend>
<div style="margin-top: 10px;">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<input type="button" id="btn1" value="追加文本"/>
<input type="button" id="btn2" value="追加列表项"/>
</div>
</fieldset>
<fieldset id="test02">
<legend>2.删除元素</legend>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
用户登录 <br/>
登录名:<input type="text" id="name" value=""/><br/>
密 码:<input type="text" id="password" value=""/>
</div>
<div>
<input type="button" id="btn3" value="删除div元素"/>
<input type="button" id="btn4" value="清空div元素"/>
</div>
</fieldset>
</body>
</html>