Add task to tasklist from JS to HTML page

November 23, 2021

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()
}

>Solution :

Try apppendChild.

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

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