javascript - 将项目添加到按钮单击 js 的列表中

Question

添加文本字段“inputw1”和“inputw2”的值。单击按钮后，应生成表单列表: “a-->b cd-->w ……” 未捕获的类型错误:无法读取 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>

Please try above code snippet.

1. 将 ul 元素添加到代码中。

2. 更改一些 JavaScript 代码，如上面的代码片段。您不需要在 JavaScript 中使用 for 语句。

更新

I've updated answer as your request so that You can remove element from the list.

I've added some code like below for that.

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();
}