javascript - Simple ToDo-List doesn't work -

My toDo list works the way I want to, I am working with JavaScript for just 2 weeks It is very new to me, so it does not look good for code.

The result turned out to be incorrect. If I type in "buy food" the first line just looks like this, but next time I want to "run the dog", it displays

• purchase food
• Buying food
• walking a dog

  I hope you understand my problem. This eliminates the unordered list tag after the first click and adds the other things to another

  Here is javascript:

    var taskList = []; Var text = "& lt; ul & gt;" Function addToList () {var Work = document.getElementById ("toDoTask"). Values; TaskList.push (work); (I = 0; i & lt; task list; height; i ++) for {text + = "
   + Agenda [i] + "& lt; / li & gt;" ; } Text + = "& lt; / ul & gt;"; Document.getElementById ("todoList"). InnerHTML = text; }    
   
   
   The issue is that after you add each item, Are there. Instead of using raw HTML, consider using element objects and applying, and use text node objects to handle user input - this removes the possibility of a DOM based XSS vulnerability. 
   
    Window.onload = function () {var taskList = []; Var Container = document.getElementById ("todoList"); Document.getElementById ("Add"). Onclick = addToList; Function addToList () {var Work = document.getElementById ("toDoTask"). Values; TaskList.push (work); Var al = document.createElement ('ul'); Var Lee; (I = 0; i & lt; taskList.length; i ++) for {li = document; create element ('li'); Li.appendChild (document.createTextNode (agenda [i])) ul.appendChild (li); } Container. Manufacturer HTML = ''; Container.appendChild (ul); }};   
    Functions: & lt; Input id = "toDoTask" /> & Lt; Input type = "button" id = "add" value = "add" /> & Lt; Div id = "todoList" & gt; & Lt; / Div & gt;