jquery在append和appendTo添加的区别

最新推荐文章于 2022-05-16 21:21:17 发布

cdcdhj

最新推荐文章于 2022-05-16 21:21:17 发布

阅读量241

点赞数

分类专栏： javascript学习日记文章标签： jquery js javascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/112122963

版权

javascript学习日记专栏收录该内容

142 篇文章 0 订阅

订阅专栏

用append是这样的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="list">
			<ul><li>ONE</li><li>TWO</li>
			<li>THREE</li><li>FOUR</li></ul>
		</div>
		<div class="add">+添加</div>
		<script>
			
				$('.add').click(function(){
				var str='<li>FIVE</li>';
				$('.list li:last-child').append(str);
			});	
		</script>
	</body>
</html>

//输出为在FOUR的文本后面添加了

FIVE
,再点添加就在FOUR和FIVE 的后面分别添加了
FIVE

，因为这是父子节点添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="list">
			<ul><li>ONE</li><li>TWO</li>
			<li>THREE</li><li>FOUR</li></ul>
		</div>
		<div class="add">+添加</div>
		<script>
			
				$('.add').click(function(){
				
				$('<li>FIVE</li>').appendTo($('.list li:last-child'));  //注意这里的不同，一个是把变量添加在里面，一个是把节点放在里面
			});	
		</script>
	</body>
</html>

//输出为在FOUR的文本后面添加了

FIVE
,再点添加就在FOUR和FIVE 的后面分别添加了
FIVE

，因为这是父子节点添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="list">
			<ul><li>ONE</li><li>TWO</li>
			<li>THREE</li><li>FOUR</li></ul>
		</div>
		<div class="add">+添加</div>
		<script>
			
				$('.add').click(function(){
				var str='<li>FIVE</li>';
				$('.list li:last-child').after(str);  //这里就是把<li>FIVE</li>添加到<li>FOUR</li>这节点的后面，并不像append和appendTo一样添加到内容FOUR的后面
			});	
		</script>
	</body>
</html>