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

您要一遍又一遍地附加const filenames = ['f1.parquet', 'f2.parquet', 'f3.parquet']; const readPromises = filenames.map(f => readFile(f)); const allPromises = Promise.all(readPromises); // Read and combine allPromises.then(contentsArray => contentsArray.join('\n')) .then(joinedContent => console.log(joinedContent)) .catch(console.error);：

newli

因此，在随后的node.appendChild(newli);中，它会从DOM中的先前位置中删除。而是在事件处理程序中创建一个新的LI：

enter

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);
  }
});

Answer 2

您的脚本必须如下所示。您需要注释一些行。阅读我在注释行上方的注释以进行解释。

您可以在以下位置查看完整的示例：Running Sample

//no need of line below as a new li is being created in keypress event
//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");
        node.appendChild(document.createTextNode(inputText));
        //no need of line below as above line is already appending to new li some text
        //node.appendChild(newli);
        ul.appendChild( node );

    }
});

根据文本类型的输入动态创建列表

2 个答案: