我用 HTML/Javascript 创建了一个待办事项列表。如何在添加到列表的每个项目的左侧添加一个复选框，并在添加的每个项目的右侧添加一个 X 按钮以将其从列表中删除。这是我到目前为止得到的
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
listItem.innerText = input.value;
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input type="submit">
</form>
<ul id="list">
</ul>
</body>
</html>最佳答案
继续使用与之前相同的技术，只需继续创建所需的元素并将它们附加到列表项即可。
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
console.log("Delete code!");
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.type = 'checkbox';
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input type="submit">
</form>
<ul id="list">
</ul>
</body>
</html>关于javascript - 如何在每个列表项之前添加一个复选框，并在列表项之后添加一个删除按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50891015/