您的位置：首页 > Web前端 > JavaScript

JavaScript操作DOM节点元素重排

2017-07-04 19:00 543 查看
作者：hahawhyha

感谢作者！！

avaScript动态向ul中插入100个li节点，5秒后实现元素的倒排

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
//用JS为id为test的ul下动态创建100个li节点，1秒后将这100个节点实现倒排（节点处理，非innerHTML）
window.onload = function(){
var ul = document.getElementById("test");
for(var i=0;i<100;i++){
var li = document.createElement("li");
var content = document.createTextNode(i);
li.appendChild(content);
ul.appendChild(li);
}
//  document.write(ul.firstChild);
setTimeout(function(){
var temp=ul.removeChild(ul.lastChild);
//ul.appendChild(temp);
ul.insertBefore(temp,ul.firstChild);
for(var j=0;j<99;j++){
var temp2=ul.removeChild(ul.lastChild);
ul.insertBefore(temp2,ul.childNodes[j+2]);
}
},5000);

}

</script>
</head>
<body>
<ul id="test">
</ul>
</body>
</html>




内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航