从输入值创建列表项答案

【问题标题】：create list item from input value从输入值创建列表项
【发布时间】：2021-11-26 20:04:43
【问题描述】：

我正在做一个待办事项列表项目，但我遇到了一个问题，我希望当我单击提交按钮时，输入值变成一个列表项，但它不起作用。这是代码：

let btn = document.getElementById('btn')
let txt = document.getElementById('txt')

btn.addEventListener('click', function(){
    let list = document.createElement('li')
    list.innerHTML = txt.value
})

<h1 id="title">To do list</h1>
    <div class="main">
        <input type="text" alt="type text here" id="txt">
        <button type="submit" id="btn">Submit</button>
    </div>

【问题讨论】：

这能回答你的问题吗？ Add an element to the DOM with JavaScript
如果按钮在表单中，表单提交将在 JS 完成之前发生。您要么需要中断提交按钮的默认操作，要么将按钮更改为键入 button 以允许发生任何 JS DOM 操作

标签： javascript html css web

【解决方案1】：

你忘了document.body.appendChild(list);

【讨论】：

【解决方案2】：

您需要在您的文档中有一个 ul（如果它是一个无序列表）元素 - 或者使用 JS 创建一个，然后您需要将新的列表项添加到该元素（而不是正文）。

试试这个 sn-p（其中 ul 元素已经在文档中）

let btn = document.getElementById('btn')
let txt = document.getElementById('txt')
let ul = document.getElementById('ul');

btn.addEventListener('click', function() {
  let list = document.createElement('li')
  list.innerHTML = txt.value;
  ul.appendChild(list);
})

<h1 id="title">To do list</h1>
<div class="main">
  <input type="text" alt="type text here" id="txt">
  <button type="submit" id="btn">Submit</button>
</div>
<ul id="ul">
</ul>

【讨论】：