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>
来源: http://lib.csdn.net/article/javascript/38156