JavaScript实现购物清单追加li元素文本不渲染报错问题

li渲染不出文本的核心错误是取输入值的属性用错了：

• <input>是单标签表单控件，用户输入的内容存在value属性里，textContent是拿普通双标签DOM内部文本的，input本身没有子文本节点，你代码里取到的v永远是空字符串，当然渲染不出内容。
• 另外你现有代码没给删除按钮绑事件，就算内容显示了，点删除也没反应。

• 改取值逻辑：把let v = input.textContent;换成let v = input.value.trim();，加trim()是为了去掉用户不小心输的首尾空格，防止加空白条目。
• 加空值判断：如果取到的内容是空的，直接终止逻辑，不生成无效的空li。
• 补删除逻辑：每个删除按钮生成的时候就绑定点击事件，触发时直接把它所属的li节点删掉即可。
• 顺手加个回车提交的小优化，用户输完按回车就能加条目，不用非得点按钮，使用体验更顺畅。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping list example</title>
    <style>
        li {
            margin-bottom: 10px;
        }
        
        li button {
            font-size: 12px;
            margin-left: 20px;
            color: #666;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>My shopping list</h1>
    <div>
        <label for="item">Enter a new item:</label>
        <input type="text" name="item" id="item">
        <button>Add item</button>
    </div>
    <ul></ul>
    <script>
        const btn = document.querySelector('button');
        const ul = document.querySelector('ul');
        const input = document.querySelector('input');

        // 抽离添加条目逻辑，供按钮点击、回车触发共用
        function addItem() {
            const v = input.value.trim();
            // 空内容直接返回，不生成无效节点
            if (!v) return;

            const sp = document.createElement('span');
            const btn2 = document.createElement('button');
            const u_i = document.createElement('li');

            sp.textContent = v;
            btn2.textContent = 'delete';
            // 绑定删除事件
            btn2.addEventListener('click', () => {
                u_i.remove();
            })

            u_i.appendChild(sp);
            u_i.appendChild(btn2);
            ul.appendChild(u_i);
            
            // 添加完成清空输入框并聚焦，方便下次输入
            input.value = '';
            input.focus();
        }

        btn.addEventListener('click', addItem);
        // 绑定回车快捷提交
        input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') addItem();
        })
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Noah Q'yain