我希望我的代码在用户一个接一个地键入新元素时，不断向列表中添加新元素。但是代码不能做到这一点。
要实现用户在输入框中一个接一个地键入新元素，并实时将这些元素添加到列表中，你需要使用前端开发技术，特别是JavaScript来处理用户的输入事件，并动态更新DOM。以下是一个简单的示例，展示了如何实现这一功能：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时添加元素到列表</title>
</head>
<body>
<input type="text" id="itemInput" placeholder="输入新元素">
<button id="addItemButton">添加</button>
<ul id="itemList"></ul>
<script src="app.js"></script>
</body>
</html>JavaScript部分（app.js）
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('itemInput');
const button = document.getElementById('addItemButton');
const list = document.getElementById('itemList');
button.addEventListener('click', function() {
const newItem = input.value.trim();
if (newItem) {
const listItem = document.createElement('li');
listItem.textContent = newItem;
list.appendChild(listItem);
input.value = ''; // 清空输入框
}
});
// 可选：允许用户按下回车键添加元素
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
button.click();
}
});
});解释
- HTML部分：创建了一个输入框（
input），一个按钮（button），和一个无序列表（ul）用于显示添加的元素。 - JavaScript部分：
- 使用
DOMContentLoaded事件确保DOM完全加载后再绑定事件监听器。 - 为按钮添加点击事件监听器，当按钮被点击时，获取输入框的值，创建一个新的列表项（
li），并将其添加到列表中。 - 可选地，为输入框添加键盘事件监听器，允许用户按下回车键来添加元素。
- 使用
应用场景
- 待办事项列表：用户可以实时添加待办事项。
- 购物清单：在线购物时，用户可以即时添加商品到购物车。
- 实时聊天应用：用户输入消息后，消息立即显示在聊天窗口中。
可能遇到的问题及解决方法
- 输入框值未清空：确保在添加元素后，使用
input.value = '';清空输入框。 - 重复添加相同元素：可以在添加前检查列表中是否已存在该元素，或者使用唯一标识符来区分。
- 性能问题：如果列表很长或更新非常频繁，考虑使用虚拟滚动技术来优化性能。
通过上述方法，你可以实现用户输入新元素后实时更新列表的功能。如果遇到具体问题，可以根据错误信息或行为表现进一步调试和优化代码。
相关·内容
这是我的代码。我想让它在用户输入元素时不断地向列表中添加元素。print(_list)** 下面是输出： typehere:**element_1**typehere:**element_2**
['element_2'] 我想要
浏览 19提问于2020-11-03得票数 0
回答已采纳
我希望只呈现新添加的元素，而不是在新元素被添加到列表时重新呈现整个列表。我试着添加关键道具，但仍然所有的元素都在渲染。这是我的用例的示例代码，在这里，当我们向列表中添加一个新元素时，我们
浏览 4提问于2021-10-31得票数 0
回答已采纳
1回答
我希望能够允许用户不断地向JList添加元素。该程序允许用户在文本字段中输入元素，当用户按下JButton时，它会将其添加到列表中。我可以这样做，但我的程序只允许我覆盖以前的元素，而不是添加新元素。
浏览 2提问于2014-11-17得票数 1
编辑列表时，应该在按“丢弃”时放弃更改，并在按“保存”时保存更改。这部分起作用了。但是，在进入编辑模式时，我将一个几乎为空的对象推到数据数组中，以便用户可以添加新元素，如果用户不键入任何内容，则将其删除。稍后，我将查找对输入的任何更改，并添加更多空元素。问题
浏览 2提问于2014-12-03得票数 2
回答已采纳
我在一个手机应用上使用Ionic2，Angularfire 2和Fireabase 3。我使用push方法在我的数据集合上插入记录，并创建一个惟一的UID，这对我来说是完美的。我的问题是，我如何才能有一个序列号，比如从100开始，每次我推送(Ed)一个新的记录(对象)时，<e
浏览 1提问于2017-05-01得票数 1
目前，我正在帮助客户端使用InfoPath创建表单，而且我在获取列表时遇到了一些问题。
每当我向列表(重复区段)添加一个新元素时，它就会在视图中的列表顶部结束，我希望将它添加到底部。我的客户端需要一个自定义按钮来触发元素的添加</e
浏览 0提问于2016-06-12得票数 0
回答已采纳
我正在动态地将超文本标记语言附加到网页上，并且我还使用jQuery来管理内容。$("tr#myRowToAppend").append("<td class="
浏览 1提问于2009-05-10得票数 3
回答已采纳
我运行一个服务器，它有一个处理定时系统的事件处理程序，当我连续运行其中的3个时，它会给出这个异常 at java.lang.Thread.run(Thread.java:662)
下面是产生问题的方法
浏览 0提问于2011-04-03得票数 0
回答已采纳
1回答
我正在实现无限滚动，以便在我的uitableview中加载新数据，uitableview的实现方式类似于Apple embedded App中的联系人样式。我的数据源是一个IList，然后我在它上面添加了新元素。在将新数据加载到该列表时我</em
浏览 0提问于2013-06-04得票数 0
回答已采纳
我有一个向DOM添加新元素的按钮。现在我想为点击这个新元素编写event listner。但是不能这样做，因为当页面加载时，这个元素将不在DOM中。到目前为止，我尝试过的代码是
const initButton = document.querySelector(".wS .amr .amn .ams"
浏览 0提问于2020-08-24得票数 0
我正在尝试使用Contract应用程序来编辑和维护供应商位置。Locations"Added 添加了名为"Locations“的对象，并在其下键入</
浏览 2提问于2020-04-30得票数 0
3回答
它们在查找和修改结构的特定元素方面工作得很好，但到目前为止，我对如何添加新元素感到困惑。根据我所读到的，从技术上讲，我不能使用遍历，因为它违反了向列表中插入新元素的遍历规则，而且这是假设我甚至可以从一开始就知道如何使用遍历来做到这一点(我对Haskell仍然很不在行，镜头包中大多数东西
浏览 1提问于2013-08-28得票数 7
我正在使用Qt创建一个QT5.4GUI应用程序(实际上，我使用的是Qt 3.3.2，但还没有完成任何C++；所有内容都在.ui文件中)。我想要创建一个框，其中包含一个(空的)项目列表，用户可以在该框中双击以向列表中添加一个新元素(可以是单次单击，也可以是其他
浏览 1提问于2015-03-25得票数 1
我现在有一个addToClients()，它在按下按钮时向clients数组添加一个新元素。每当按下按钮时，我都希望将新值添加到clients中，并在输入新元素(因此我可以使用jQuery的autocomplete特性)之后在数组中保持值。但是，每当我再次按submit键时，前面添加<
浏览 0提问于2019-02-21得票数 0
回答已采纳
这个结构是一维的，这意味着父元素有一个一维数组(当我说数组时，它纯粹是描述性的，我不是指ArrayList或任何类似的元素)。每个单独的元素都有一个索引，表示它在(on？)中的位置。是家长。由于元素可以(而且通常是)编号，每个章节有一个编号列表，所以我必须知道章节中元素的索引，所以当一个新元素被添加到列表<em
浏览 3提问于2013-01-19得票数 1
1回答
我创建了一个名为"muterole“的命令，它有一些子命令。/r) <role_id / role_mention>``` Removes the set muterole for this server
""") 现在，我创建了一个"setmr“命令，该命令在一个json文件中设置服务器的muterole。问题是它
浏览 11提问于2021-08-20得票数 0
我想创建一个列表，用户不仅可以编辑单个步骤，而且还可以编辑步骤的数量。我如何在Angularjs中做到这一点？我遇到的问题是，如果我在"ol“中使用ng-model，我不认为我可以创建单个元素的列表，但如果我在"li”中使用ng-repe
浏览 1提问于2016-08-24得票数 0
1回答
我一直在寻找一个动画，当一个新的元素被添加到滚动列表中时，它可以平滑滚动过程。 示例:当一个新元素出现在列表中时，我的代码捕获最新的元素并将其放入滚动列表中。新元素被添加到顶部，旧元素被推到底部。
浏览 13提问于2021-01-23得票数 0
我试图懒惰地呈现一个元素列表，最初只呈现视图中的内容，然后在使用IntersectionObserver向下滚动时用真实的元素替换占位符元素。这使列表的长度不会随着我添加新元素而改变，而且呈现起来要便宜得多，因为在页面加载时我只列出了空的div。就像一个穷人的</em
浏览 4提问于2021-05-17得票数 0
我有一个primeNG自动完成组件，如果没有找到键入的搜索词，它需要运行一些代码。目前，我在onBlur事件的处理程序中有这段代码。我遇到的问题是，根据 Prime，将对下拉列表的单击视为对新元素的单击，从而在用户实际离开该元素之前触发onBlur。不知道他们的理由是什么，但在我看来，由于这个
浏览 2提问于2019-07-20得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
