Javascript 根据元素id为'的数组对元素布局重新排序；s

我需要执行以下任务： 有两个“ul”元素包含一些具有唯一id的“li”

    <div id="sr">
        <ul id="li-fav">
            <li id="app-1">a</li>
            <li id="app-2">b</li>
            <li id="app-3">c</li>
        </ul>
        <ul id="li-rest">
            <li id="app-4">d</li>
            <li id="app-5">e</li>
            <li id="app-6">f</li>            
        </ul>
    </div>

如何以最为浏览器友好的方式执行此操作？使用

文档片段

？台阶应该是什么？我在JSFIDLE上有一个示例：

---

您只需沿着以下直线移动li元素：

var favs = obj.fav;  // where obj is the object returned by getElementsOrder() 
var i = favs.length;
var ul = document.getElementById('li-fav');

while (i--) {
  ul.insertBefore(document.getElementById('app-' + favs[i]), ul.firstChild);  
}

var rest = obj.rest;
i = rest.length;
ul = document.getElementById('li-rest');

while (i--) {
  ul.insertBefore(document.getElementById('app-' + rest[i]), ul.firstChild);  
}

请注意递减计数，以便使用insertBefore以正确的顺序结束元素。应该重构代码以消除逻辑的重复

编辑-重构

---

添加了hasOwnProperty测试以防止继承的可枚举属性。

可能我错了，但这不允许op将li从一个ul移动到另一个ul。另外，我非常肯定，与documentFragment的使用相比，它缺乏性能。@mike_hornbeck-是的，你错了。：-）它会将元素移动到您想要的任何位置。如果需要，将它们添加到片段中，然后将片段添加到DOM中，但我怀疑是否有任何真正的性能优势，因为在脚本完成之前，浏览器不会更新DOM。

//{'fav': [3, 4, 1], 'rest': [2, 5, 6]}

var favs = obj.fav;  // where obj is the object returned by getElementsOrder() 
var i = favs.length;
var ul = document.getElementById('li-fav');

while (i--) {
  ul.insertBefore(document.getElementById('app-' + favs[i]), ul.firstChild);  
}

var rest = obj.rest;
i = rest.length;
ul = document.getElementById('li-rest');

while (i--) {
  ul.insertBefore(document.getElementById('app-' + rest[i]), ul.firstChild);  
}

function doStuff() {
  var i, ids, list, ul; 

  for (list in obj) {

    if (obj.hasOwnProperty(list)) {
      ids = obj[list];  
      i = ids.length;
      ul = document.getElementById('li-' + list);

      while (i--) {
        ul.insertBefore(document.getElementById('app-' + ids[i]), ul.firstChild);  
      }
    }
  }
}