点击按钮向列表添加项的JS问题：输入值添加及appendChild报错

首先，咱们一步步拆解你的问题，先搞定报错，再实现功能：

报错的核心原因 #

这个错误意味着你尝试调用appendChild的对象是null——说白了就是你的代码找不到要往里面加列表项的那个<ul>/<ol>容器。常见触发场景有两种：

• 获取列表元素时ID拼写错误，或者HTML里根本没给这个容器加正确的ID
• JS代码在DOM元素加载完成前就执行了（比如脚本放在<head>里，页面还没渲染出列表容器就跑代码了）

另外你的代码片段里还有两个明显的逻辑bug：

• 多余的for循环：w已经是你拼接好的w1+'-->'+w2字符串，循环取w[i].value完全错误（单个字符根本没有value属性）
• 拼写错误：最后一行var rule = documen...明显少写了t，应该是document

修正后的完整实现代码 #

这里给你写一个能正常工作的版本，包含HTML和JS：

HTML部分 #

<input type="text" id="inputw1" placeholder="输入前半段">
<input type="text" id="inputw2" placeholder="输入后半段">
<button onclick="pushRules()">添加到列表</button>
<!-- 必须有这个列表容器，ID要和JS里的对应 -->
<ul id="rulesList"></ul>

JavaScript部分 #

function pushRules() {
    // 1. 获取并清理输入框的值
    var w1 = document.getElementById('inputw1').value.trim();
    var w2 = document.getElementById('inputw2').value.trim();
    
    // 可选：为空输入做提示
    if (!w1 || !w2) {
        alert("请填写两个输入框的内容哦");
        return;
    }
    
    // 2. 拼接成需要的格式
    var ruleText = w1 + '-->' + w2;
    
    // 3. 找到列表容器（这里的ID必须和HTML里的完全一致！）
    var rulesList = document.getElementById('rulesList');
    if (!rulesList) {
        console.error("找不到列表容器，请检查HTML里的元素ID");
        return;
    }
    
    // 4. 创建列表项并添加到容器
    var li = document.createElement("li");
    li.textContent = ruleText; // 用textContent比innerHTML更安全，避免XSS风险
    rulesList.appendChild(li);
    
    // 可选：清空输入框，方便继续添加
    document.getElementById('inputw1').value = '';
    document.getElementById('inputw2').value = '';
}

关键注意事项 #

• 确保DOM加载完成：如果你的JS脚本放在<head>标签里，最好把代码包裹在DOMContentLoaded事件里，避免元素还没渲染就执行代码：

  document.addEventListener('DOMContentLoaded', function() {
      // 这里放pushRules函数或者按钮点击事件绑定代码
  });
  

• 避免无效逻辑：删掉原来多余的for循环，直接用拼接好的字符串即可
• 仔细检查拼写：注意document这类关键字不要写错

这样修改后，点击按钮就能把输入框的内容拼成a-->b的格式添加到列表里，再也不会出现那个TypeError报错啦。

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