在按钮上单击js添加项目到列表

Question

添加了文本字段“inputw1”和“inputw2”的值。单击按钮后，应生成表单列表：“a - > b cd - > w ...”未捕获TypeError：无法读取null的属性'appendChild'

function pushRules(list){
        var rules = "";

        var w1 = document.getElementById('inputw1').value;
        var w2 = document.getElementById('inputw2').value;
        var w = w1+'-->'+w2;
        for(var i=0; i<w.length; i++){
            rules+=w[i].value;
        }
    var li = document.createElement("li");
    var rule = document.createTextNode(rules);
    li.appendChild(rule);
    document.getElementById("list").appendChild(li);
}

<form>
        <label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
        <input type="button" value="add rule" onclick="pushRules()">
    </form>

Answer 1

function pushRules(list){
    var rules = "";

    var w1 = document.getElementById('inputw1').value;
    var w2 = document.getElementById('inputw2').value;
    var w = w1+'-->'+w2;
    var li = document.createElement("li");
    var rule = document.createTextNode(w);
    li.appendChild(rule);

    var removeBtn = document.createElement("input");
    removeBtn.type = "button";
    removeBtn.value = "Remove";
    removeBtn.onclick = remove;
    li.appendChild(removeBtn);
    document.getElementById("list").appendChild(li);
}

function remove(e) {
  var el = e.target;
  el.parentNode.remove();
}

<form>
    <label>w1:</label><input id="inputw1" type="text">
    <label> --> w2:</label><input id="inputw2" type="text">
    <ul id="list"></ul>
    <input type="button" value="add rule" onclick="pushRules()">
    </form>

请尝试上面的代码段。

1. 将ul元素添加到代码中。
2. 更改一些javascript代码，如上面的代码片段。你不需要在javascript中声明。

更新

我已根据您的请求更新了答案，以便您可以从列表中删除元素。

我为此添加了一些代码，如下所示。

var removeBtn = document.createElement("input");
removeBtn.type = "button";
removeBtn.value = "Remove";
removeBtn.onclick = remove;
li.appendChild(removeBtn);

function remove(e) {
  var el = e.target;
  el.parentNode.remove();
}

Answer 2

您的HTML中没有list ID的元素 - 添加它。

function pushRules(list){
    var w1 = document.getElementById('inputw1').value;
    var w2 = document.getElementById('inputw2').value;
    var li = document.createElement("li");
    document.getElementById("list").appendChild(li).textContent = w1 + '-->' + w2;
}

<form>
<label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
<input type="button" value="add rule" onclick="pushRules()">
</form>
<ul id="list"></ul>

您还没有正确填充li的文本内容。

Answer 3

未捕获的TypeError：无法读取null的属性'appendChild'

当你的脚本运行时，你试图找到的元素不在DOM中。

你的DOM-reliant剧本的位置会对其行为产生深远的影响。浏览器从上到下解析HTML文档。元素被添加到DOM中，脚本（通常）在遇到它们时执行。这意味着订单很重要。通常，脚本无法找到稍后出现在标记中的元素，因为这些元素尚未添加到DOM中。

见演示

function pushRules() {

  var w1 = document.getElementById('inputw1').value;
  var w2 = document.getElementById('inputw2').value;
  
  var li = document.createElement("li");
  li.innerText = w1 + '-->' + w2;
  
  document.getElementById("list").appendChild(li);
}

<form>
  <label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
  <input type="button" value="add rule" onclick="pushRules()">
</form>

<ui id="list"></ui>