本文介绍了一种使用JavaScript实现的倒排HTML列表的方法。通过获取指定的ul元素及其子节点，将子节点移除并重新按倒序添加，从而实现了列表项的倒排显示。此方法适用于动态调整网页中列表顺序的场景。
<!doctype html>
<html>
<head>
<title>倒排列子元素</title>
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<script>
function sb(){
var ul=document.getElementsByTagName('ul')[1];//【0】获取第几个的ul
if(ul.hasChildNodes()){
var len=ul.childNodes.length;//得到ul的长度
var arr=[];
for(var i=0;i<len;i++){
arr[i]=ul.childNodes[0];
ul.removeChild(ul.childNodes[0]);
}
for(var i=len-1;i>=0;i--){
ul.appendChild(arr[i]);
}
}
}
</script>
</head>
<body style=" text-align:center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<br/>
<input type="button" value="倒排列子元素按钮" onClick="sb()">
</body>
</html>
<html>
<head>
<title>倒排列子元素</title>
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<script>
function sb(){
var ul=document.getElementsByTagName('ul')[1];//【0】获取第几个的ul
if(ul.hasChildNodes()){
var len=ul.childNodes.length;//得到ul的长度
var arr=[];
for(var i=0;i<len;i++){
arr[i]=ul.childNodes[0];
ul.removeChild(ul.childNodes[0]);
}
for(var i=len-1;i>=0;i--){
ul.appendChild(arr[i]);
}
}
}
</script>
</head>
<body style=" text-align:center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<br/>
<input type="button" value="倒排列子元素按钮" onClick="sb()">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
