Question

我已经阅读了有关如何添加列表项的其他问题和文章，但这些都没有。这是我的JavaScript：

var inpu = document.getElementById("inp").value;//get input text
var ul = document.getElementById("lis");//get list
var li = document.getElementById("li");//get list item
li.appendChild(document.createTextNode(inpu));
ul.appendChild(li);

这是我读到的，我应该这样做，但他们从未向我展示过HTML，所以我可以看到如何做到这一部分，这就是为什么我假设问题出在我的HTML中。这就是我的html的样子：

<body>
<input id="inp"/>
<button id="button">Submit</button>
<ul id="lis">
    <li id="li"> </li>
</ul>



<script src="This.js"></script>

非常感谢任何帮助。

Answer 1

如果要添加新的列表项，则需要使用document.createElement('li')。您的代码只是替换现有li的内容; appendChild没有做任何事情，因为它已经是最后一个孩子了。

＆＃13;

document.getElementById("button").addEventListener("click", function() {
  var inpu = document.getElementById("inp").value; //get input text
  var ul = document.getElementById("lis"); //get list
  var li = document.createElement("li"); //get new list item
  li.appendChild(document.createTextNode(inpu));
  ul.appendChild(li);
});

＆＃13;

<input id="inp" />
<button id="button">Submit</button>
<ul id="lis">
  <li id="li"></li>
</ul>

＆＃13;

Answer 2

'inpu'等于输入字段中的值。当您第一次加载该页面时，输入字段中没有值，因此没有任何内容被附加到列表项。

如果将代码放入函数中，然后在单击按钮时调用该函数，它将起作用。像这样：

HTML：

<body>
<input id="inp"/>
<button id="button" onclick="putInList()">Submit</button>
<ul id="lis">
    <li id="li"> </li>
</ul>

的javascript：

var putInList = function() {
    var inpu = document.getElementById("inp").value;//get input text
    var ul = document.getElementById("lis");//get list
    var li = document.getElementById("li");//get list item
    li.appendChild(document.createTextNode(inpu));
    ul.appendChild(li);
}

如何在javascript中将html列表项添加到已创建的列表中？

2 个答案: