無法顯示<LI>項目

Question

我不知道為什么我不能將 LI 項目添加到 #historial <UL> 。

如果 for 循環在函數內部，則列表會顯示一些重復的元素。 我幾乎可以肯定 for 循環應該是現在，在函數之外。

有人可以幫我嗎？

 let terminos= []; function agregar(){ let termino = document.querySelector('#busqueda').value; console.log(termino); if( terminos.length >= 5){ terminos.shift(); terminos.push(termino); }else{ terminos.push(termino); } console.log(terminos); document.querySelector('#busqueda').value =''; } let boton= document.querySelector('#enviar'); boton.addEventListener('click', agregar); for( let i =0 ; i< terminos.length; i++){ document.querySelector('#historial').innerHTML += `<li> ${terminos[i]}</li>`; }

 #historial{ background-color: tomato; width:50vw; height:300px; color:white; font-size:20px; }

 <label for="busqueda"> Término</label> <input type="text" id="busqueda"> <br> <button type="submit" id="enviar"> Enviar</button> <p> UL#historial</p> <ul id="historial"> </ul>

Answer 1

試試這個https://stackoverflow.com/a/20673977/10801086

你應該appendChild而不是設置你的ul元素的innerHtml

...
 let boton= document.querySelector('#enviar');
    boton.addEventListener('click', function1);

function function1() {
  var ul = document.querySelector('#historial');
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(document.querySelector('#busqueda').value));
  ul.appendChild(li);
}

Answer 2

好的，這是一個非常基本的場景，簡單來說，它可以通過將li元素附加到ul元素來解決。 請看一下代碼片段。

希望這對你有幫助。 干杯！！

 function addElementToList() { var listElement = document.getElementById("historial"); for (var i = 0; i < 5; i++) { //this will be your `terminos.length` loop var li = document.createElement("li"); li.appendChild(document.createTextNode("New Element")); listElement.appendChild(li); } }

 <html> <body> <div> Dynamic list generation: <ul id="historial"> </ul> <button onClick="addElementToList()" /> Add New Element </div> </body> </html>

無法顯示<LI>項目

問題描述

2 個解決方案

解決方案1
1 2020-09-14 07:59:59

解決方案2
0 2020-09-14 09:50:30

無法顯示<LI>項目

問題描述

2 個解決方案

解決方案1 1 2020-09-14 07:59:59

解決方案2 0 2020-09-14 09:50:30

解決方案1
1 2020-09-14 07:59:59

解決方案2
0 2020-09-14 09:50:30