我不能 append 在 js 文件中创建的 div<section> ，在我的 index.html 中的网格内</section>

Question

I'm trying to create a to-do list and use html/css/js to do it.

• I've created a button, and a text input on HTML.
• Created a function in JS.
• Got both by their id.
• Created a div in JS.
• inserted the the text that I got from text input inside the var that holds the div.
• and tryied to append this div into the section using appenddChild.

When I click the button I can see the div apearing for less than a second inside the section, and it desapears.

 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>

Answer 1

You are using a form element. So if you click the button, it would refresh the page.

To prevent it, you can use onSubmit="return false;" .

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

Answer 2

Its because you're using a <form> element. Forms have a default behavior that when it contains a button, that button will be used to submit the form, unless the type of the button is other than submit .

You'll need to stop the default behavior of the form from happening. You do this by preventing the default behavior of the submit event.

You do this with Event.preventDefault() inside the event handler.

 const form = document.querySelector('#adding-items'); const taskList = document.querySelector('#list'); const userInput = document.getElementById("add-field") function addTask() { let userInputValue = userInput.value; let task = document.createElement("div"); task.innerText = userInputValue; task.className = "task-bar"; taskList.appendChild(task); } form.addEventListener('submit', event => { event.preventDefault(); // Stop the default behavior. addTask(); });

 <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">ADD</button> </form> </section> <section id="list"> </section> </main>