在Todolist中添加元素内部的元素

Question

我正在创建一个待办事项列表，我可以在我的Li里面创建新的待办事项，但我无法在我的Li内部创建一个按钮（后来我想添加一个跨度） ，我希望该按钮成为删除按钮。 （当我添加一个新的待办事项时，我希望那个新的待办事项右侧有一个按钮）

<button onclick="addNewFunc()"> add</button>
<input type="text" class="input">
<ul>
    <li>1</li> 
    <li><span>X </span>2</li>
</ul>

let input = document.querySelector(".input");
let ul = document.querySelector("ul");

let addNewFunc = function () {
    let addNew = document.createElement("li");
    let createBtn = document.createElement("button");
    let name = ul.appendChild(addNew);    
    name.textContent = input.value;
    input.value = ""
};

(function(){
    input.addEventListener("keydown", function(e) {
        if(e.keyCode === 13) {
            addNewFunc();

        }
    })
}());