javascript - 从文本类型的输入动态创建列表

Question

在 HTML 中，我有文本类型和无序列表的输入。当在输入中按下回车键时，应抓取输入的文本并将其添加到列表中。我如何在没有任何库的情况下使用 javascript 实现它？

下面的代码是我编写的，但它没有按预期创建列表。它正在创建空白 li 并将所有内容添加到最后一个 li

var newli = document.createElement("li");
var inp = document.getElementsByTagName("input");
var ul = document.getElementsByTagName("ul")[0];

inp[0].addEventListener("keypress", function(event){
	
	if(event.which===13){
  	var inputText = this.value;
		this.value = " ";
		var node = document.createElement("LI");
		newli.appendChild(document.createTextNode(inputText));
		node.appendChild(newli);
		ul.appendChild( node );
    
    }
});

<input type="text">
<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
		
</ul>

Answer 1

您一遍又一遍地附加 newli:

node.appendChild(newli);

因此，在随后的 enter 中，它会从 DOM 中之前的位置删除。在事件处理程序中创建一个新的 LI:

const input = document.querySelector('input');
const ul = document.querySelector('ul');

input.addEventListener("keypress", function(event) {
  if (event.which === 13) {
    this.value = "";
    const newli = document.createElement("li");
    newli.textContent = this.value;
    ul.appendChild(newli);
  }
});

<input type="text">
<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ul>