我如何添加一个html列表项目到一个已经创建的列表在javascript

How do i add an html list item to an already created list in javascript?

本文关键字：列表 一个 创建 javascript 项目 何添加 html 添加      更新时间：2023-09-26

我读过其他关于如何添加列表项的问题和文章，但这些都不奏效。这是我的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>

非常感谢任何帮助。

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

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);
});
<input id="inp" />
<button id="button">Submit</button>
<ul id="lis">
  <li id="li"></li>
</ul>

'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);
}
相关文章：