JavaScript编写的点击添加列表项自定义函数无法正常运行怎么解决？

问题排查与修复 #

核心问题 #

你当前的代码仅在JS运行内存中创建了<li>元素，并没有将其挂载到页面的DOM树上，所以页面不会显示新增的列表项。

其他可能存在的问题 #

• 未正确获取sub按钮元素：直接调用sub.addEventListener前，需要先通过document.getElementById('sub')等方法拿到按钮DOM对象，否则会抛出sub is not defined异常。
• 未做空值校验：如果输入框为空时点击按钮，会新增无内容的列表项。

完整可用示例 #

首先确保你的HTML结构存在对应的输入框、按钮、列表容器：

<input type="text" id="inp" placeholder="请输入内容">
<button id="sub">添加列表项</button>
<ul id="list"></ul>

修正后的JS代码：

// 提前获取DOM元素
const sub = document.getElementById('sub');
const list = document.getElementById('list');

function pushing() {
  const li = document.createElement("li");
  const inputValue = document.getElementById("inp").value.trim();
  // 空值直接返回，不添加空项
  if (!inputValue) return;
  const textNode = document.createTextNode(inputValue);
  li.appendChild(textNode);
  // 将创建好的li追加到列表容器，完成DOM挂载
  list.appendChild(li);
  // 追加完成后清空输入框，提升体验
  document.getElementById("inp").value = '';
}

sub.addEventListener("click", pushing);

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