按下回车键新增li元素时原有输入文本消失该如何解决？

问题原因 #

• 核心原因是你使用了innerHTML +=的方式追加新元素：这种操作会先读取整个list容器的现有HTML字符串，拼接上新的li字符串后，再把整个容器的内容全部重新解析渲染。原有输入框里的用户输入属于运行时的DOM状态，并不会被序列化到HTML字符串里，重绘后自然就丢失了。
• 第二个问题是id重复：你给每个新生成的input都设置了相同的id="input"，id在整个文档中必须唯一，后续获取元素的操作会出现预期外的问题。
• 现有代码没有显式接收事件对象，部分浏览器环境下直接访问event可能报错。

修复后的代码 #

document.getElementById("list").onkeydown = function Manipulate(event) {
  // 兼容不同浏览器的事件对象
  event = event || window.event;
  if (event.keyCode === 13) {
    // 单独创建新节点，不会影响已有DOM
    const newLi = document.createElement('li');
    const newInput = document.createElement('input');
    newInput.type = 'text';
    // 用类名替代唯一id，避免重复冲突
    newInput.className = 'list-input';
    newLi.appendChild(newInput);
    document.getElementById("list").appendChild(newLi);
    // 可选：让新增的输入框自动聚焦
    newInput.focus();
  } else if (event.keyCode === 8) {
    const list = document.getElementById('list');
    // 加非空判断，避免容器为空时删除报错
    if (list.firstElementChild) {
      list.removeChild(list.firstElementChild);
    }
  }
}

可选优化 #

如果需要获取所有输入框的内容，直接通过类名.list-input批量查询即可，不需要依赖id；如果需要实现删除当前聚焦的空输入框，可通过event.target定位当前触发事件的输入框，再删除对应的父级li，逻辑会更符合用户使用习惯。

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