我想制作一个待办事项列表，但我一开始就卡住了，我在这段代码中哪里出错了？

Question

我想用用户在输入区输入的值将 li 添加到 ul 元素。这是我在控制台中遇到的错误：

[Error] TypeError: document.getElementsByClassName("list-group").appendChild is not a function. (In 'document.getElementsByClassName("list-group").appendChild("li")', 'document.getElementsByClassName("list-group").appendChild' is undefined)
    additem (script.js:7)

//this is my javascript code-->

    function additem() {
    var task = document.getElementsByClassName("input-group-text").value;
    
    var li = document.createElement("li");
    li.classList.add("list-group-item");
    li = "task";
    document.getElementsByClassName("list-group").appendChild("li");
    }
    document.getElementById("button").addEventListener("click",additem);

 //<--!this is my html code-->

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LearnCodeOnline</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    </head>
    <body class="bg-dark">
    <div class="container bg-warning p-4">
      <h1 class="text-center">LearnCodeOnline</h1>
      <div class="input-group">
        <span class="input-group-text">todo</span>
        <textarea class="form-control" aria-label="With textarea"></textarea>
      </div>
      
      <button id="button" class="float-right">Add</button>
      
        <ul class="list-group">
          <li class="list-group-item">An item</li>
        </ul>
      
      <!-- <button
        type="button"
        class="btn btn-success btn-lg mt-4 mx-auto d-block sort-btn"
      >
        Sort courses
      </button> -->
       </div>

    </body>
    </html>

Answer 1

JS:-

function additem() {
    var task = document.getElementsByClassName("form-control")[0].value;
    
    var li = document.createElement("li");
    li.classList.add("list-group-item");
    li.innerText = task;
    document.getElementsByClassName("list-group")[0].appendChild(li);
}
document.getElementById("button").addEventListener("click",additem);

而不是.appendChild("li")，我们将给它一个元素而不是字符串，因为它接受元素而不是字符串
getElementsByClassName() returns 一个数组，所以我们将在它所在的两个函数中获取数组第 0 个索引处的项目
也不要像这样设置 li = "task"，我们必须将其文本设置为 li.innerText = task

我想制作一个待办事项列表，但我一开始就卡住了，我在这段代码中哪里出错了？

I want to make a todo list but I am stuck at the start, where am I going wrong in this code?

javascript

button