如何在JavaScript DOM中为待办事项列表添加带文本的元素

你代码里的核心问题是创建<li>元素的方式错误：document.createElement('li').innerHTML(txt)这种写法不会返回创建的li元素——因为innerHTML是赋值操作，执行后返回的是undefined，所以你实际上是往ul里添加了无效内容，自然看不到新的待办项。

修正后的JavaScript代码（推荐方案） #

这个方案用textContent设置内容，安全性更高，能避免用户输入恶意HTML代码的风险：

// 获取按钮、列表和输入框元素
let btn = document.querySelector('.add');
const ul = document.querySelector('.list');
const input = document.querySelector('input');

// 按钮点击事件处理
btn.addEventListener('click', function() {
  // 获取输入值并去除首尾空格
  const txt = input.value.trim();
  // 如果输入为空，直接返回，不添加空项
  if (!txt) return;

  // 创建li元素并设置内容
  const li = document.createElement('li');
  li.textContent = txt;
  // 将li添加到无序列表中
  ul.appendChild(li);

  // 添加完成后清空输入框，方便继续输入
  input.value = '';
});

// 额外优化：支持回车键提交输入
input.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    btn.click();
  }
});

另一种实现方式（用innerHTML） #

如果你不需要考虑安全风险，也可以直接通过拼接HTML字符串的方式添加：

let btn = document.querySelector('.add');
const ul = document.querySelector('.list');
const input = document.querySelector('input');

btn.addEventListener('click', function() {
  const txt = input.value.trim();
  if (!txt) return;

  // 直接拼接li标签到列表的innerHTML中
  ul.innerHTML += `<li>${txt}</li>`;
  input.value = '';
});

你的HTML代码（优化点说明） #

HTML里的<input>是自闭合标签，不需要</input>，修正后如下：

<div class="card">
  <div class="todoheader">TODO List</div>
  <div class="todotext"></div>
  <ul class="list">
  </ul>
  <div class="addtodo">
    <button class="add" type="button"> + </button>
    <input type="text" class="input" placeholder="add todo">
  </div>
</div>

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