如何将用户输入内容插入<li>？JavaScript待办列表问题

云原生阿岚

2026-7-2

待办列表功能修正方案

问题定位

你的JS代码里这一行是核心错误：

li.appendChild((element.attribute = input));

element变量未定义，且这种赋值方式无法生成可插入DOM的文本节点，这就是输入内容无法显示的原因。你已经掌握document.createTextNode，直接结合用户输入就能解决问题。

修正后的完整代码

HTML（移除多余空列表项）

<div>
  <input type="text" id="task" placeholder="What do you need to do?" />
  <button class="btn" onclick="createToDo()">Submit</button>
</div>
<div>
  <ul id="list"></ul>
</div>

JavaScript（两种实现方式，任选其一即可）

方式1：用你熟悉的`document.createTextNode`

function createToDo() {
  // 获取输入值并过滤首尾空格
  var input = document.getElementById("task").value.trim();
  
  // 空输入直接返回，避免生成空列表项
  if (!input) return;

  var ul = document.getElementById("list");
  var li = document.createElement("li");
  
  // 将用户输入转为文本节点插入li
  var textNode = document.createTextNode(input);
  li.appendChild(textNode);
  
  ul.appendChild(li);
  
  // 清空输入框，提升操作体验
  document.getElementById("task").value = "";
}

方式2：更简洁的`textContent`赋值（新手友好）

function createToDo() {
  var input = document.getElementById("task").value.trim();
  if (!input) return;

  var ul = document.getElementById("list");
  var li = document.createElement("li");
  
  // 直接给li赋值文本内容，底层自动创建文本节点
  li.textContent = input;
  
  ul.appendChild(li);
  document.getElementById("task").value = "";
}