JavaScript：appendChild、ul反序排列

  • 1.把元素从原有的父级里删除掉
  • 2.把元素添加到新的父级
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

现有<ul>标签，里面有4个<li>，如果ul自己循环调用appendChild( )，ul下的li就会逆序排列。原因在于，当ul.appendChild(li)的时候，按上面两个步骤走，ul下的第一个li标签被删除，然后添加到末尾。流程如下：

1 2 3 4

ul调用appendChild，执行步骤1，删除掉1，此时剩下2 3 4；执行步骤2，添加1，此时变成2 3 4 1。循环4次，整个ul就逆序排列了。

完整例程

<!DOCTYPE html>
<html>
<head>
	<title>111</title>
<style type="text/css">

</style>
<script type="text/javascript">
	window.onload = function(){
		var oUl = document.getElementById('ul1');
		var aLi = document.getElementsByTagName('li');
		for (var i = aLi.length - 1; i >= 0; i--) {
			oUl.appendChild(aLi[i]);
		}
	};
</script>
</head>
<body>
<ul id='ul1'>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>

 

posted @ 2020-02-10 16:03  昨夜昙花  阅读(72)  评论(0)    收藏  举报