如何在html中创建一个自更新列表？答案

【问题标题】：How to create a self-updating list in html?如何在html中创建一个自更新列表？
【发布时间】：2018-05-11 00:25:45
【问题描述】：

我是 html 新手，我仍在尝试解决这个问题：

我想创建一个列表，当我在文本框中添加新项目时会自动更新，例如：

我想添加“Brother”，然后它会列出“- Brother”，当我决定添加更多项目时，例如“Sister”，它将在新行中添加“-Sister”，但如果我决定添加同样的事情我想在不添加新行的情况下加倍，例如，如果我要再次添加“Brother”，它必须在两行中显示“2x Brother”而不是“Brother”，是否可以在 html 中执行？

提前致谢

【问题讨论】：

仅使用 HTML 是无法实现的。为了使您的 HTML 动态化，您需要向其中添加 JavaScript 代码。话虽如此，我看到你是 HTML 新手，所以我的建议是你不要急于求成，尝试一起学习 HTML、CSS 和 JavaScript 的前端堆栈。
然后随时回来问更具体的问题。请参阅this guide 在此处提问。

标签： html list self-updating

【解决方案1】：

回答你的问题：

可以用html做吗？

我认为不，这在纯 html 中是不可能的。

您需要使用 Javascript。您可以在文本框（输入或文本区域）上监听更改事件，当发生更改时，使用 Javascript 读取文本框中的单词，将它们添加到 Javascript 数组中，对数组进行排序以检查重复项或检查每个元素对所有其他数组进行检查以检查重复项并将重复项及其计数存储在另一个数组中。

还有许多其他方法可以使用 Javascript 实现您的目标。

【讨论】：

【解决方案2】：

使用简单的javascript插入列表项

<!DOCTYPE html>
<html>
  <body>

    <input id="input1" type="text">
    <input type='button' value='add' onclick="addToTheList()" />

    <ul id="list">
    </ul>
    <script type="text/javascript">
      function addToTheList() {
        var u = document.getElementById("input1").value;
        document.getElementById("list").innerHTML += ("<li>" + u + "</li>");
      }

    </script>
  </body>
</html>

【讨论】：