如何通过Enter按键与JS的.appendChild创建<li>？排查代码问题

你的代码核心逻辑没问题，但有几个关键问题导致功能无法正常工作，具体问题和修复方式如下：

1. 事件监听器未生效 #

你定义了addItemToList函数，但从未调用过它，输入框的按键事件根本没被绑定，自然不会触发添加列表项的逻辑。

2. 选择器不够精准 #

用document.querySelector('input')和document.querySelector('ul')会匹配页面上第一个对应元素，如果后续页面新增其他input或ul，代码会出错。应该利用你已经定义的ID来精准选择元素：#input-area（输入框）和#list（列表）。

3. 缺少输入体验优化 #

按下Enter添加内容后，输入框内容不会清空，反复按Enter会重复添加相同内容；而且没有判断输入是否为空，容易添加空的列表项。

修复后的完整代码 #

HTML（无需改动） #

<div class="day" id="monday">
  <div class="span">
    <h3 class="day-title">Monday</h3>
  </div>
  <input type="text" class="input" id="input-area">
  <ul id='list'></ul>
</div>

JavaScript #

function addItemToList() {
  // 用ID精准选择目标元素
  const input = document.getElementById('input-area');
  const ul = document.getElementById('list');

  input.addEventListener('keydown', function(e) {
    // 用e.key替代keyCode，keyCode已被废弃，e.key更直观兼容
    if (e.key === 'Enter') {
      e.preventDefault();
      // 去除输入内容前后空格，判断是否为空
      const inputValue = input.value.trim();
      if (!inputValue) return;

      const li = document.createElement('li');
      // 用textContent比innerHTML更安全，避免XSS风险
      li.textContent = inputValue;
      ul.appendChild(li);

      // 添加后清空输入框
      input.value = '';
    }
  });
}

// 调用函数绑定事件
addItemToList();

// 也可以放在DOM加载完成事件里，确保页面元素已存在
// document.addEventListener('DOMContentLoaded', addItemToList);

额外优化说明 #

• 替换keyCode为e.key：keyCode是已废弃的API，e.key更具可读性且适配现代浏览器。
• 用textContent替代innerHTML：如果用户输入包含HTML标签，innerHTML会解析执行，存在安全风险，textContent仅显示纯文本更安全。
• 增加空值判断：避免添加空的或仅含空格的无效列表项。

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