06. jQuery 元素添加、删除

最新推荐文章于 2022-11-10 08:53:59 发布

wang_zhi_peng2007

最新推荐文章于 2022-11-10 08:53:59 发布

阅读量127

点赞数

分类专栏：前端_jQuery 应用文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wang_zhi_peng2007/article/details/84826018

版权

前端_jQuery 应用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>