Add task to tasklist from JS to HTML page-CodePudding

I am trying to input a new task. It will only allow me to add one task. If I input another it just removes the last. How can I save multiple?

HTML Code:

            <h2>Future Projects</h2>
            <div id="projects">
                <div class="project">first</div>
                <div class="project">y</div>
                <div class="project">last</div>
            </div>
            <form action="index.html" get>
                <label for="message">Meaningful Message:</label>
                        <br>
                        <textarea name="message" id="message" rows="1" cols="20">
                        </textarea>
                    <br>
                    <input type="submit" value="submit">
            </form>
        </div>

JS Code:

const message = words.get('message');
if(message.value !== '') {
    let e = document.createElement('div')
    e.innerHTML = `${message}`
    e.className = 'project'
    let parent = document.getElementById('projects')
    parent.append(e);
    e.preventDefault()
}

CodePudding user response：

Try apppendChild.

const project = document.createElement("div");
project.innerText = "text";
//...

const parent = document.getElementById('projects');
parent.appendChild(project);

CodePudding user response：

I was able to get it !

JS Changes:

let submit = document.getElementById('submit').addEventListener('click', add)

function add(event){
    event.preventDefault()
    let message = document.getElementById('message').value
    let parent = document.getElementById('projects')
    parent.innerHTML  = `<div >${message}</div>`
}

and

let submit = document.getElementById('submit').addEventListener('click', add)

function add(event){
    event.preventDefault()
    let message = document.getElementById('message').value
    let parent = document.getElementById('projects')
    let e = document.createElement('div')
    e.innerHTML = `${message}`
    e.className = 'project'
    parent.appendChild(e);
}