JavaScript待办清单点击提交将输入内容转为列表项不生效问题求助

你的代码存在两个核心问题导致功能不生效：

• 仅在JS内存中创建了li元素，没有将其插入到页面DOM树中，浏览器不会渲染该元素
• 现有HTML结构没有提供承载li列表项的父容器（ul/ol标签）

修复后的完整代码 #

HTML部分

<h1 id="title">To do list</h1>
<div class="main">
    <input type="text" alt="type text here" id="txt">
    <!-- 将submit类型改为button，避免误触表单提交导致页面刷新 -->
    <button type="button" id="btn">Submit</button>
</div>
<!-- 新增待办列表承载容器 -->
<ul id="todoList"></ul>

JS部分

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

btn.addEventListener('click', function(){
    // 空内容校验，避免添加空白待办，不需要可以删除该行
    if (!txt.value.trim()) return
    let list = document.createElement('li')
    // 用textContent替代innerHTML更安全，避免XSS注入风险
    list.textContent = txt.value
    // 将创建的li元素插入到列表容器中，才会渲染到页面
    todoList.appendChild(list)
    // 添加完成后清空输入框，优化使用体验，不需要可以删除该行
    txt.value = ''
})

内容的提问来源于stack exchange，提问作者totiti