Question

添加了文本字段“inputw1”和“inputw2”的值。单击按钮后，应生成表单列表： “一 - ＆GT，B CD - ＆GT;瓦特 ......” 未捕获的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>

请尝试上面的代码段。

将ul元素添加到代码中。
更改一些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中没有ID为list的元素 - 将其添加到其中。

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：无法读取属性＆quot; appendChild＆＃39;为null

当您的脚本运行时，您尝试查找的元素不在DOM中。

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

参见演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: