Javascript 按list.id对无序按钮列表进行排序

我的html5、css、javascript程序将是一个日历。单击事件按钮将显示该事件的详细信息。现在，我有相当于一天的事件，按照它们被输入的顺序。我一直在尝试根据按钮id对无序的按钮列表进行排序。在这里，您可以看到每个ul按钮是如何创建的。值来自indexedDB

  function renderTodo(row) {
    var todos = document.getElementById("todoItems");
    var li1 = document.createElement("li");
    var name = document.createTextNode(row.name);
    var li2 = document.createElement("li");
    var time = document.createTextNode(row.time);
    var btn = document.createElement("BUTTON")
    var a = document.createElement("a");
    var li = document.createElement("li");

    a.addEventListener("click", function() {
      helicopter.indexedDB.deleteEvent(row.timeStamp);
    }, false);

    a.textContent = " [Delete]";
    li1.appendChild(name);
    li2.appendChild(time);
    btn.onclick=viewEvent;
    btn.id=row.parent;
    btn.row = row;
    btn.appendChild(li1);
    btn.appendChild(li2);
    li.appendChild(btn);
    li.appendChild(a);
    li.id = row.time;
    todos.appendChild(li)
    sortUnorderedList(todos);
  }

换句话说，成品看起来是这样的。
ul-button2-[删除]
ul-button1-[删除]
ul按钮3-[删除]

当我将列表转换为数组时，它会删除按钮，只保留两个li值。我尝试了几件事都没有成功（见下文）。我应该放弃按钮的想法，仅仅使用CSS来提供相同的外观，还是有一个好的方法来排序按钮

  function sortUnorderedList(ul) {
      //if(typeof ul == "string")
        //ul = document.getElementById(ul);

      // Idiot-proof, remove if you want
      if(!ul) {
        alert("The UL object is null!");
        return;
      }

      // Get the list items and setup an array for sorting
      var lis = ul.getElementsByTagName("LI");
      var ali = Array.lis;
      ali.sort(liSort);
      ul.innerHTML = "";

      // Populate the array
      for(var i = 0, j = lis.length; i < 2; i++)
        ul.appendChild(ali[i]);

      // Sort it
      //vals.sort(liSort);
      //vals.reverse();

      // Change the list on the page
      //for(var i = 0, l = lis.length; i < l; i++)
        //lis[i].innerHTML = vals[i];
    }
function liSort(one, two) {
    //alert(one.id + " - " two.id);
    return one.id - two.id;
}

函数sortUnorderedList（ul）{
//如果（ul的类型==“字符串”）
//ul=document.getElementById（ul）；
//防白痴，如果你想移除
如果（！ul）{
警报（“UL对象为空！”）；
回来
}
//获取列表项并设置用于排序的数组
var lis=ul.getElementsByTagName（“LI”）；
var ali=Array.lis；
阿里·索特（liSort）；
ul.innerHTML=“”；
//填充数组
对于（变量i=0，j=lis.length；i<2；i++）
ul.儿童（阿里[i]）；
//分类
//VAL.sort（liSort）；
//vals.reverse（）；
//更改页面上的列表
//对于（变量i=0，l=lis.length；i1。）因为
li
s（应该排序）有子
li
s，所以最好按类选择它们（html5提供）；因此，在
li.id=row.time之后添加一个具有以下行的类：

li.className = 'sortLi';

2.）在函数中选择它们并将列表转换为数组：

var lis = ul.getElementsByClassName("sortLi");
var ali = Array.prototype.slice.call(lis);

3.）现在按排序顺序追加：

ali.sort(liSort);
for (var i = 0; i < ali.length; i++) {
    ul.appendChild(ali[i]);
}

ali.sort（liSort）；
对于（变量i=0；i

4.）排序功能：

function liSort(one, two) {
    return one.id < two.id ? -1 : ( one.id > two.id ? 1 : 0 );
}

函数liSort（一，二）{
返回1.id<2.id-1:（1.id>2.id-1:0）；
}

另见