JavaScript动态添加无序列表时额外生成li元素问题求助

• 每次触发clicker函数时，你直接通过Listing.innerHTML +=的方式将整个leadTracker数组的所有元素全部追加到现有列表末尾，没有清空之前已经渲染的li元素
• 示例说明：初始数组长度为3，第一次点击后页面渲染3个li；第二次点击新增1个元素后数组长度变为4，你又循环把4个元素全部追加，页面就会出现3+4=7个li，自然会出现多余元素

提供两种常用修复方案，可根据实际场景选择：

方案1：每次渲染前清空原有列表（适用数组整体更新场景） #

每次循环渲染前先把列表的innerHTML清空，再完整渲染整个数组的内容，逻辑最简单不易出错：

let leadTracker = ["bbboo","hjkku","hhythjm"];
console.log(leadTracker)
let inputText = document.getElementById("input-text");
let inputButton = document.getElementById("input-button");
let Listing = document.getElementById("listings");
function clicker() {
  leadTracker.push(inputText.value);
  // 先清空原有列表内容
  Listing.innerHTML = "";
  for(let i = 0; i < leadTracker.length; i++) {
    Listing.innerHTML += "<li>" + leadTracker[i] + "</li>";
  }
}

方案2：仅追加新插入的元素（适用单次新增单个元素场景，性能更高） #

不需要循环整个数组，直接把新push的元素单独添加到列表末尾即可，不需要重复渲染已有元素：

let leadTracker = ["bbboo","hjkku","hhythjm"];
console.log(leadTracker)
let inputText = document.getElementById("input-text");
let inputButton = document.getElementById("input-button");
let Listing = document.getElementById("listings");
function clicker() {
  const newVal = inputText.value;
  leadTracker.push(newVal);
  // 仅追加新元素，不需要循环整个数组
  Listing.innerHTML += "<li>" + newVal + "</li>";
}

内容的提问来源于stack exchange，提问作者Kelvin