javascript 按钮将输入添加到列表项

📌 相关文章

📜 javascript 按钮将输入添加到列表项 - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:12.359000 🧑 作者: Mango

在 Web 开发中，我们经常需要将用户输入添加到列表中展示，来展示一些信息。本文将介绍如何使用 JavaScript 将用户输入添加到列表项中。

HTML 代码

首先，我们需要先在 HTML 文件中创建一个列表：

<ul id="list"></ul>

JavaScript 代码

接下来，我们需要在 JavaScript 文件中创建一个函数，它将在用户单击按钮时被调用：

function addItem() {
  const input = document.getElementById("input");
  const value = input.value;
  const list = document.getElementById("list");
  const item = document.createElement("li");
  item.innerHTML = value;
  list.appendChild(item);
}

在这个函数中，我们首先获取输入框和它的值。然后，我们获取列表并创建一个新的列表项，将其值设置为输入框的值。最后，我们将列表项添加到列表中。

接下来，我们需要在 HTML 文件中添加一个输入框和一个按钮，让用户能够输入并将输入添加到列表中：

<input type="text" id="input">
<button onclick="addItem()">Add Item</button>

完整代码

下面是完整的 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Add to List Example</title>
  </head>
  <body>
    <h1>Add Items to List</h1>
    <input type="text" id="input">
    <button onclick="addItem()">Add Item</button>
    <ul id="list"></ul>
    <script>
      function addItem() {
        const input = document.getElementById("input");
        const value = input.value;
        const list = document.getElementById("list");
        const item = document.createElement("li");
        item.innerHTML = value;
        list.appendChild(item);
      }
    </script>
  </body>
</html>

总结

在本篇文章中，我们学习了如何使用 JavaScript 将用户输入添加到列表项中。我们创建了一个函数，用于在用户单击按钮时将输入添加到列表中。同时，我们还添加了一个输入框和一个按钮，让用户能够输入并将输入添加到列表中。