列表元素顺序反转

例子：

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

页面效果：

具体方法：

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

执行后的页面效果：

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