Question

我正在尝试建立一个简单的待办事项清单。我想为列表中的每个项目添加一个（x）。该列表有两个现有项目，其余的将从用户输入中添加。

我当前的代码只能将（x）添加到现有项目。我遵循了以下教程，但是我认为将（x）添加到现有项目和新输入项目的方式是多余的。（请注意，它基本上两次使用“ var span = document.createElement（“ SPAN”）; ...”两次。

是否可以将（x）末尾附加到文档中的所有li项？

// Create a "close" button and append it to each list item
var allListItems = document.getElementsByTagName("li");

function appendClose(x){
	var close = document.createElement("span");
	var text = document.createTextNode("(\u00D7)");
	close.appendChild(text);
	return x.appendChild(close);
}
// Turn object into array.
const peopleArray = Object.keys(allListItems).map(i => allListItems[i]);
console.log(peopleArray);
peopleArray.map(appendClose);


// Create new list item after button click. 
function createNewElement(){
	var li = document.createElement("li"); // create <li>
	var v_userInput = document.getElementById("myInput");
	var content = document.createTextNode(v_userInput.value);
	li.appendChild(content);
	document.getElementById("myUL").appendChild(li);

	document.getElementById("myInput").value = ""; //fresh the input box;

};

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Work to-do</title>
</head>

<body>
<h1> Work to-do </h1>


<div id="myDiv">
	<input id="myInput" type="text" placeholder="New item..." maxlength="27">
	<button id="enter" onclick="createNewElement()">Add</button>
</div>

<ul id="myUL">
	<li>Gym</li>
	<li>Food</li>
</ul>


</body>
<script type="text/javascript" src="7_todo.js"></script>
</html>

Answer 1

您只需在createNewElement()内再写一行即可：

appendClose(li);

此外，还应通过检查输入值的长度来防止将空值附加到待办事项列表。我已经添加了一个示例。

// Create a "close" button and append it to each list item
var allListItems = document.getElementsByTagName("li");

function appendClose(x){
	var close = document.createElement("span");
	var text = document.createTextNode("(\u00D7)");
	close.appendChild(text);
	return x.appendChild(close);
}
// Turn object into array.
const peopleArray = Object.keys(allListItems).map(i => allListItems[i]);
// console.log(peopleArray);
peopleArray.map(appendClose);


// Create new list item after button click. 
function createNewElement(){
	var li = document.createElement("li"); // create <li>
	var v_userInput = document.getElementById("myInput");
  
  // Prevents empty task in todo list
  if(v_userInput.value.length === 0) {
    alert('Enter something!');
    return ;
  }
  
	var content = document.createTextNode(v_userInput.value);
	li.appendChild(content);
        appendClose(li); // Edited here
	document.getElementById("myUL").appendChild(li);

	document.getElementById("myInput").value = ""; //fresh the input box;

};

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Work to-do</title>
</head>

<body>
<h1> Work to-do </h1>


<div id="myDiv">
	<input id="myInput" type="text" placeholder="New item..." maxlength="27">
	<button id="enter" onclick="createNewElement()">Add</button>
</div>

<ul id="myUL">
	<li>Gym</li>
	<li>Food</li>
</ul>


</body>
<script type="text/javascript" src="7_todo.js"></script>
</html>

JS动态创建的AppendChild元素，无需冗余代码

1 个答案: