JavaScript操作DOM節點元素重排

JavaScript動態向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>


發佈了131 篇原創文章 · 獲贊 33 · 訪問量 20萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章