无法显示 <LI> 项
Posted
技术标签:
【中文标题】无法显示 <LI> 项【英文标题】：Cannot display <LI> items 【发布时间】：2020-12-31 02:54:02 【问题描述】：我不知道为什么我不能将 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>【问题讨论】：
【参考方案1】：试试这个 https://***.com/a/20673977/10801086
您应该appendChild 而不是设置innerHtml 的ul 元素
...
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);
【讨论】：
在这里解释原因更具教学性，而不是链接到外部指南。【参考方案2】：好的，这是一个非常基本的场景，简单来说，可以通过将li 元素附加到ul 元素来解决。请看一下sn-p。
希望这对您有所帮助。干杯！！
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> 项的主要内容，如果未能解决你的问题，请参考以下文章
*ngFor 在 <li> 中使用 Angular 版本 8.2.8 绑定从 API 接收的数据，但无法显示数据