使用appendChild创建多个子项

Question

我正在创建一个简单的待办事项。

当我添加待办事项并列出它们时，我希望每个待办事项都显示delete和change status按钮，

但只出现一个按钮，

请注意，第一个按钮（删除按钮）非常小，甚至无法正常工作。但是当我只添加一个按钮时，它的效果非常好。

这是用于添加列表项和按钮的js，

var view = {
  displaytodos: function(){
  var todoul = document.querySelector('ul');
  todoul.innerHTML = '';
  for (var i=0;i < todolist.todos.length;i++){
    var newli = document.createElement('li');
    newli.setAttribute('class','text-success');
    var todotextwithstatus = '';
    if (todolist.todos[i].completed === true){
      todotextwithstatus = '(X) - ' + todolist.todos[i].todotext + ' --> ';
    }
    else{
      todotextwithstatus = '( ) - ' + todolist.todos[i].todotext + ' --> ';
    }

    newli.id = i;
    newli.textContent = todotextwithstatus;
    delbtn = this.createdeletebutton();
    statusbtn = this.createstatusbutton();
    newli.appendChild(statusbtn);
    newli.appendChild(delbtn);
    todoul.appendChild(newli);
  }
},
createdeletebutton: function(){
  var delbtn = document.createElement('button');
  delbtn.textContent = 'Delete';
  delbtn.className = 'DeleteElement';
  return delbtn;
},
createstatusbutton: function(){
  var statusbtn = document.createElement('button');
  delbtn.textContent = 'Change Status';
  delbtn.className = 'changestatusbutton';
  return statusbtn;
},

这是html，

<div class='col-xs-4'>
  <h3>Your todos will appear here.</h3>
  <ul>
    <li>You have not added any todos yet.</li>
  </ul>
  <button onclick='handlers.toggle_all()'>Change status of all Todos</button>
</div>

这是什么解决方案？为什么会这样？