提问人：breanne1209 提问时间：7/5/2023 更新时间：7/5/2023 访问量：33
如何在JS中使用回车键和.appendChild键制作<li>？
How to make a <li> using keydown of enter and .appendChild in JS?
问：
我有一个输入文本字段，我想创建一个
这是我正在编辑的 HTML 片段
`<div class="day" id="monday"><div class="span"><h3 class="day-title">Monday</h3></div>
<input type="text" class="input" id="input-area">
<ul id='list'></ul>
</div>`
还有我尝试实现的 JS
`function addItemToList() {
document.querySelector('input').addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const li = document.createElement('li');
ul.appendChild(li);
li.innerHTML = input.value;
}
})
};`
谢谢你的任何建议
答：
0赞
Qori
7/5/2023
#1
这很好用
<script>
const input = document.querySelector('input');
const list = document.querySelector('ul');
input.addEventListener('keydown', (e) => {
if (e.keyCode !== 13) return;
e.preventDefault();
const item = document.createElement('li');
item.innerHTML = input.value;
list.appendChild(item);
});
</script>
评论
0赞
breanne1209
7/5/2023
我复制了您发布的内容并在我的代码中尝试过，但没有结果;问题可能是因为我有多个输入和<ul>实例？有 7 个输入和 <ul>，每个输入的标记都类似，只是一周中的每一天的 ID 都不同。你认为这就是问题所在吗？
0赞
Qori
7/6/2023
document.querySelector 只选择第一个匹配项
评论