列表元素顺序反转

最新推荐文章于 2024-04-13 14:15:00 发布

weixin_30776545

最新推荐文章于 2024-04-13 14:15:00 发布

阅读量578

点赞数

原文链接：http://www.cnblogs.com/web-wy/p/10027027.html

版权

例子：

1 <ul id="list">
2     <li>1</li>
3     <li>2</li>
4     <li>3</li>
5     <li>4</li>
6 </ul>

页面效果：

具体方法：

1     var ul = document.getElementById("list");
2     var list = ul.getElementsByTagName("li");
3     var fragment = document.createDocumentFragment();
4     for (var i = list.length - 1; i >= 0; i--) {
5         fragment.appendChild(list[i]);
6     }
7     ul.appendChild(fragment);

执行后的页面效果：

createDocumentFragment()方法，则是用了创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

转载于:https://www.cnblogs.com/web-wy/p/10027027.html