如何更新li而不是将li添加到dom

Question

所以我希望每次点击按钮时都能更新ul中的li。但李却被加入了ul。异步函数poke(链接({const-response=等待获取(链接(；

poke_data= await response.json();
console.log(poke_data.name);
console.log(poke_data.species.name);
console.log(poke_data.weight);
console.log(poke_data.abilities[0].ability.name);
console.log(poke_data.sprites.other.dream_world.front_default);
console.log("MOVES");
//   elem.appendChild(ability_ul);

for(var i=0;i<3;i++)
{
//   console.log(poke_data.moves[i].move.name);
ability_li=document.createElement('li');
ability_li.innerText=poke_data.moves[i].move.name;
ability_ul.appendChild(ability_li); 

}

}

button.addEventListener("单击"，((=>｛

let num = Math.floor((Math.random() * 151) );
console.log(num);
var store = data.results[num].url;

console.log(store);
//  getApi(store);
poke(store);

在此处输入图像描述

})

Answer 1

首先尝试获取现有的LI(如果有的话(，如下所示：

var items = ability_ul.querySelectorAll("li");
for(var i=0;i<3;i++)
{
//   console.log(poke_data.moves[i].move.name);
ability_li= items ? items[i] : document.createElement('li');
ability_li.innerText=poke_data.moves[i].move.name;
if (!ability_li.parentNode) ability_ul.appendChild(ability_li); 

}