使用javascript创建li元素时不断消失[重复]答案

【问题标题】：li element keeps disappearing when created using javascript [duplicate]使用javascript创建li元素时不断消失[重复]
【发布时间】：2022-09-27 21:44:03
【问题描述】：

我正在尝试使用 JavaScript 创建一个待办事项应用程序。它使用输入创建 li 元素，但它在一秒钟后消失。有人可以告诉我我的代码有什么问题吗？

let ul = document.getElementById(\"ul\"); //get the main list. capture ul element
let addBtn = document.getElementById(\"add-btn\"); //button
let todoInput = document.getElementById(\"todo-input\"); //targets the input

addBtn.addEventListener(\"click\", function() {
  let list = document.createElement(\"li\");
  list.innerHTML = todoInput.value;
  ul.appendChild(list);
});

<form>
  <h2>Input todo</h2>
  <input type=\"text\" class=\"todo\" id=\"todo-input\" placeholder=\"Type your task to add\" />
  <button class=\"btn\" id=\"add-btn\" type=\"submit\">Add</button>
</form>
<div class=\"todo-container\">
  <h2>Things to do:</h3>
    <ul id=\"ul\">
    </ul>
</div>
</div>

如果这是在一个表单中 - 那么页面正在被提交

标签： javascript html

【解决方案1】：

这样做

addBtn.addEventListener("click", function(e) {
  e.preventDefault(); // prevent the default behavior (refresh)
  let list = document.createElement("li");
  list.innerHTML = todoInput.value;
  ul.appendChild(list);
});

该页面正在提交，您需要阻止该提交，以便页面不会刷新。

【讨论】：