将ul中的 10000 个<li>子元素颠倒顺序

采用了innerHTML, createElement(), createDocumentFragment()三种方法。

1. 首先初始化ul

 1 function initUL() {
 2     var ul = document.createElement("ul");
 3     var inner = "";
 4     for(var i=0; i<10000; i++) {
 5         inner += "<li>"+i+"</li>"
 6     }
 7     ul.innerHTML = inner;
 8     document.body.appendChild(ul);
 9     return ul;
10 }

 

2. innerHTML方法

 1 function reverseULStr(ul) {
 2     var nul = document.createElement("ul");
 3     var cs = ul.children;
 4     var results = [];
 5     for(var i=cs.length-1; i>=0; i--) {
 6         results.push(cs[i].outerHTML);
 7     }
 8 
 9     
10     nul.innerHTML = results.join("");
11 
12     document.body.removeChild(ul);
13     document.body.appendChild(nul);
14 
15     return nul;
16 }

3. createElement()方法

 1 function reverseULNode(ul) {
 2     var nul = document.createElement("ul");
 3     var cs = ul.children;
 4     for(var i=cs.length-1; i>=0; i--) {
 5         nul.appendChild(cs[i]);
 6     }
 7 
 8     document.body.removeChild(ul);
 9     document.body.appendChild(nul);
10 
11     return nul;
12 }

4. createDocumentFragment()方法

 1 function reverseULFragment(ul) {
 2     var nul = document.createElement("ul");
 3     var fragment = document.createDocumentFragment();
 4     var cs = ul.children;
 5     for(var i=cs.length-1; i>=0; i--) {
 6         fragment.appendChild(cs[i]);
 7     }
 8     nul.appendChild(fragment);
 9     document.body.removeChild(ul);
10     document.body.appendChild(nul);
11 
12     return nul;
13 }

 

5. 结果

 

Firefox 27.0:

Chrome 32.0:

转载于:https://www.cnblogs.com/defghy/p/3557949.html