将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:
