为什么往数组中添加新项后，对应的无序列表未更新显示？

• 列表渲染的for循环仅在JavaScript脚本首次加载时执行一次，此时myLeads为初始化的空数组，不会生成任何列表节点
• 按钮点击的事件回调中，仅完成了数组赋值、控制台打印操作，没有触发列表重新渲染的逻辑，数组新增的内容永远不会同步到页面DOM中

将列表渲染逻辑封装为独立函数，初始化时可执行一次，每次点击按钮更新数组后主动调用渲染函数即可。推荐在每次渲染前清空列表原有内容，避免重复渲染旧条目。

修复后的完整JS代码：

const inputBtn = document.querySelector("#input-btn");
let myLeads = [];
const inputEl = document.querySelector("#input-el");
const ulEl = document.querySelector("#ul-el");

// 封装列表渲染逻辑
function renderLeads() {
  // 清空原有列表内容，避免重复渲染
  ulEl.innerHTML = ''
  for (let i = 0; i < myLeads.length; i++) {
    ulEl.innerHTML += "<li>" + myLeads[i] + "</li>";
  }
}

inputBtn.addEventListener("click", function() {
  myLeads.push(inputEl.value);
  // 可选：清空输入框优化使用体验
  inputEl.value = ''
  // 数组更新后主动触发渲染
  renderLeads()
});

// 若初始化时有默认数据可保留该行，无默认数据可删除
renderLeads()

你的HTML代码没有逻辑问题，无需修改。

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