将列表元素附加到无序列表

Question

因此，对于我的第一个 JavaScript 项目，我正在尝试记录 web 应用程序。 我希望我的笔记以无序列表的形式显示在屏幕的右侧。 问题是代码没有创建一个新的 li 元素，而是将文本添加到一个列表元素中。

因此，如果注释 1 是“遛狗”，它将使用该字符串创建一个列表元素。 如果注释 2 是“洗衣服”，它只会更改列表元素并使其“遛狗洗衣服”

这是 HTML：

<div id="noteArea">
        <div id="noteButtons"></div>
        <textarea name="" id="noteText" cols="62" rows="40"></textarea>
        <button id="noteSubmit">Submit</button>
    </div>

    <div id="noteList">
        <h1>Note List</h1>
        <ul>

        </ul>
    </div>

这是 JavaScript：

const noteLi = document.createElement("li");

const submitButton = document.querySelector("#noteSubmit");
submitButton.addEventListener("click", createNote);

function createNote(e){
   let text = document.createTextNode(document.querySelector('#noteText').value);
   noteLi.appendChild(text);
   document.querySelector("ul").appendChild(noteLi);
}

Answer 1

const submitButton = document.querySelector("#noteSubmit");
submitButton.addEventListener("click", createNote);

function createNote(e){
const noteLi = document.createElement("li");
let text = document.createTextNode(document.querySelector('#noteText').value);
noteLi.appendChild(text);
document.querySelector("ul").appendChild(noteLi);
}

此代码工作正常。

每次运行提交 function 时，都应该创建新的列表元素。