JavaScript：addTask函数及appendChild添加列表项后快速消失问题咨询

嘿，这个问题我之前踩过坑！你遇到的两个现象本质是同一个原因——浏览器的表单默认提交行为在捣乱，咱们来一步步搞定它：

问题根源 #

当你的添加按钮位于<form>标签内，或者addTask()函数是绑定在表单的submit事件上时，点击按钮会触发浏览器的默认表单提交动作：页面会瞬间刷新，刚用appendChild添加的列表项还没来得及展示就随着页面刷新被清空了。而addButton()和cancelButton()能正常运行，大概率是这两个函数没有触发表单的提交逻辑。

具体解决方案 #

这里给你三种常用的解决办法，选最适合你代码结构的就行：

1. 阻止表单默认提交行为（最推荐） #

在addTask()函数开头添加阻止默认行为的代码，让浏览器不要刷新页面：

function addTask(e) {
  // 阻止表单默认提交动作
  e.preventDefault();
  
  // 你的原有逻辑：获取输入值、创建列表项、添加到列表
  const nameValue = document.getElementById('nameInput').value;
  const newLi = document.createElement('li');
  newLi.textContent = nameValue;
  document.getElementById('your-ul-id').appendChild(newLi);
  
  // 可选：清空输入框，提升用户体验
  document.getElementById('nameInput').value = '';
}

⚠️ 注意：如果是通过HTML的onclick绑定函数，记得把事件对象传进去，比如按钮要这么写：

<button onclick="addTask(event)">添加任务</button>

2. 修改按钮类型，避免触发表单提交 #

如果你的按钮是<button>标签，它的默认类型是submit（会触发表单提交），直接给按钮加上type="button"就能解决：

<button type="button" onclick="addTask()">添加任务</button>

这样点击按钮只会执行addTask()里的逻辑，不会触发页面刷新。

3. 检查是否有手动刷新代码 #

如果你的页面里没有用到<form>标签，那就要检查addTask()函数里是不是不小心写了location.reload()这类刷新页面的代码，把它删掉就行。

验证方法 #

修改完代码后，点击添加按钮试试——新的列表项应该会稳定显示在页面上，不会再一闪而过啦！

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