Блог

В HTML у меня есть ввод типа text и неупорядоченный список. при вводе вводимого текста введенный текст должен быть захвачен и добавлен в список. Как я могу добиться этого с помощью 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>  

Вы добавляете 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>  

Ваш скрипт должен быть таким, как показано ниже. Вам нужно прокомментировать некоторые из ваших строк. Прочтите мои комментарии чуть выше прокомментированной строки для пояснения.

Вы можете увидеть полный пример по адресу: 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 );

    }
});