jquery以及原生js 如何实现div倒序

最新推荐文章于 2022-11-10 08:39:56 发布

原创最新推荐文章于 2022-11-10 08:39:56 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #div倒序 #倒序

杂物间专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种不使用jQuery的情况下，仅通过Vanilla JavaScript实现HTML元素逆序排列的方法。通过对页面上的div元素进行操作，展示了如何获取这些元素并重新排列它们的顺序。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>-->
	</head>
	<body>
		<div class="container">
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
		</div>
		<script type="text/javascript">
			/*jquery*/
			/*$(".container>div").each(function(){
				$(this).prependTo(".container");
			})*/
			/*vanilla*/
			var bigContainer = document.querySelectorAll(".container>div");
			for(var i=bigContainer.length-1;i>-1;i--){
				document.querySelector(".container").appendChild(bigContainer[i]);
			}
		</script>
	</body>
</html>