如何向名为'list of works'的待办事项列表添加新项？

问题原因 #

• 核心问题：你编写的newElement函数仅完成了待办条目节点的创建，没有将生成的节点挂载到页面上的待办列表容器（ID为myUL的<ul>元素），所以新条目不会在页面显示。
• 潜在问题：你的交互代码放在<form>标签内部，点击添加按钮可能触发表单默认提交行为，导致页面刷新，即使添加了节点也会被刷新重置。

修复方案 #

1. 调整JavaScript代码，新增节点挂载逻辑，同时补充空输入校验，避免添加空白条目：

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value.trim();
  // 空输入直接拦截
  if (inputValue === '') {
    alert("请输入待办内容");
    return;
  }
  var t = document.createTextNode(inputValue);
  li.appendChild(t);

  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  // 新增：将创建好的待办条目插入到待办列表末尾
  document.getElementById("myUL").appendChild(li);
}

2. 如果出现点击添加按钮页面刷新的情况，修改HTML中的form标签，阻止默认提交行为即可：

<form onsubmit="return false;">
<!-- 其余表单内容保持不变 -->
</form>

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