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

Question

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

因此，如果注释 1 是“walk the dog”，它将使用该字符串创建一个列表元素。如果注释 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);
}

这段代码工作正常。

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

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

Appending list elements to unordered lists

html

javascript

dom

dom-events