28
2018
12

清空元素 删除元素remove和detach的区别

1、清空元素  删除元素

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#btn').click(function(){    
//				清空元素内容   empty    
//				$('#box').empty();    
//				删除元素     remove    
//				$('#box').remove();    
//				也是删除元素    
				$('#box').detach();    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<h1 id="aa">这个是h1标签</h1>    
		<input type="button" name="" id="btn" value="来点我呀" />    
		<br /><br />    
		<div id="box">    
		<h2>如果你是工作经验小于2年的朋友0</h2>    
		<h2>如果你是工作经验小于2年的朋友1</h2>    
		<h2>如果你是工作经验小于2年的朋友2</h2>    
		<h2>如果你是工作经验小于2年的朋友3</h2>    
		<h2>如果你是工作经验小于2年的朋友4</h2>    
		<h2>如果你是工作经验小于2年的朋友5</h2>    
		<h2>如果你是工作经验小于2年的朋友6</h2>    
		</div>    
	</body>    
</html>

上面代码效果图片:

2、remove和detach的区别

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#aa').click(function(){    
					alert('哈哈哈');    
				})    
//				删除元素    
				$('#btn1').click(function(){    
//				remove  会将元素节点和它身上的事件效果都删除    
//				detach只删除元素节点,不删除它身 上的事件和效果    
//				区别  这个点恢复后,原来的#aa单击事件删除了    
//				tt = $('#aa').remove();    
//				区别    这个点恢复后,原来的#aa单击事件还在    
				tt = $('#aa').detach();    
			})    
//				恢复元素    
				$('#btn2').click(function(){    
					$("#btn2").after(tt);    
				})    
				})    
		</script>    
	</head>    
	<body>    
		<input type="button" name="" id="btn1" value="删除" />    
		<input type="button" name="" id="btn2" value="恢复" />    
		<h1 id="aa">这个是h1标签</h1>    
		<br /><br />    
		<div id="box">    
		<h2>如果你是工作经验小于2年的朋友0</h2>    
		<h2>如果你是工作经验小于2年的朋友1</h2>    
		<h2>如果你是工作经验小于2年的朋友2</h2>    
		<h2>如果你是工作经验小于2年的朋友3</h2>    
		<h2>如果你是工作经验小于2年的朋友4</h2>    
		<h2>如果你是工作经验小于2年的朋友5</h2>    
		<h2>如果你是工作经验小于2年的朋友6</h2>    
		</div>    
	</body>    
</html>

上面代码效果图片:

原文链接:https://www.qiquanji.com/post/7651.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。