06. jQuery 元素添加、删除

wang_zhi_peng2007

浏览: 248901 次
性别:
来自: 北京

最近访客更多访客>>

zy103118

gogant

xiaowangabc

yjx4612233

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端_jQuery 应用

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>