列表元素顺序反转

例子：

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的次数，效率会明显提高。