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

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遍地添加newli ：

node.appendChild(newli);

因此，在后续enter s上，它会从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> 

Answer 2

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

您可以在以下位置查看完整的示例： 运行示例

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

    }
});