javascript - 我正在做一个购物清单，删除......我不知道如何使用按钮（.delete）在“div”内添加元素“li”请检查我的代码

Question

我正在构建一个待办事项列表应用程序，并且我希望该应用程序以这样一种方式工作，即当输入并保存“任务”时，输入的任务将出现在带有复选框、删除按钮和编辑的列表中按钮。我尝试使用 .appendchild() 将子元素附加到其父元素上，但它不起作用。

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("#lista");

function inputlength() {
    return input.value.length;
} 

function addLiAfterAction() {  var li = document.createElement("div");
ul.appendChild(li);
li.className= "divlist";
li.appendChild(document.createElement("li"));
li.appendChild(document.createTextNode(input.value));

input.value ="";
li.appendChild(document.createElement("button")).className= "delete";
   
}

 button.addEventListener("click", function() {
     if( inputlength() > 0) {
        addLiAfterAction();
     }
 })



input.addEventListener("keydown", function(event) {
    if (inputlength() > 0 && event.keyCode ===13) {
        addLiAfterAction();
    }
})



<ul id="lista">
        <div class="divlist"><li>Banana</li><button class="delete">Delete</button></div>
        <div class="divlist"><li>apple</li><button class="delete">Delete</button></div>
        <div class="divlist"><li>fuji</li><button class="delete">Delete</button></div>
        <div class="divlist"><li>Apple blue</li><button class="delete">Delete</button></div>
        <div class="divlist"><li>Orange</li><button class="delete">Delete</button></div>

标签： javascript