根據文本類型的輸入動態創建列表

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

    }
});