如何在todo应用程序中多次创建列表(仅限javascript)

Question

i将var liElement = document.createElement('li');移出函数addTodo()，使该函数在中工作

function removeTodo(){
liElement.remove()
};  

但现在我有另一个问题，那就是我不能添加一个以上的todo(li(

const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
var liElement = document.createElement('li');
let placeholderValue = '';

//此代码用于清除占位符值

input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});

//该功能用于添加到列表

function addTodo(){
todoList.appendChild(ulElement)
ulElement.appendChild(liElement);
liElement.classList.add('liElement')
liElement.innerHTML = input.value;
};
addBtn.addEventListener('click' , addTodo)
// this function is for remove todo from the list
function removeTodo(){
liElement.remove()
};
liElement.addEventListener('contextmenu' , (e) => {
e.preventDefault()
removeTodo()
});

Answer 1

您不使用createTextNode，例如：

var t = document.createTextNode(input.value);
liElement.appendChild(t);

你建造了一个非常复杂的结构。让你自己更轻松。

最后

const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');

为什么使用createElements？你不需要这些。您可以在html文件中创建它们。