javascript - 我无法将在 js 文件中创建的 div 附加到，在我的 index.html 中的网格内

Question

我正在尝试创建一个待办事项列表并使用 html/css/js 来完成它。

• 我在 HTML 上创建了一个按钮和一个文本输入。
• 在 JS 中创建了一个函数。
• 通过他们的ID得到了两个。
• 在 JS 中创建了一个 div。
• 将我从文本输入中获得的文本插入到包含 div 的 var 中。
• 并尝试使用 appenddChild 将此 div 附加到该部分中。

当我单击按钮时，我可以看到 div 在该部分内显示不到一秒钟，然后消失。

function addTask() {
  let userInput = document.getElementById("add-field").value;
  let task = document.createElement("div");
  task.innerText = userInput;
  taskList = document.getElementById("list");
  task.className = "task-bar";
  document.querySelector('#list').appendChild(task);
}

<main id="container">

  <section id="entrance">
    <h1>TASKS</h1>
  </section>

  <section id="adding">
    <form id="adding-items">
      <input id="add-field" type="text">
      <button id="send-btn" value="ADD" onclick="addTask()">ADD</button>
    </form>
  </section>

  <section id="list">

  </section>
</main>

标签： javascripthtmldom

Answer 1

您正在使用一个form元素。因此，如果您单击按钮，它将刷新页面。

为了防止它，您可以使用onSubmit="return false;".

<form onSubmit="return false;" id="adding-items">