Fatal编程技术网
  • javascript/
  • 如何将html列表项添加到javascript中已创建的列表中？

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

javascript html

如何将html列表项添加到javascript中已创建的列表中？,javascript,html,Javascript,Html,我读过关于如何添加列表项的其他问题和文章，但这些都不起作用。以下是我的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.createTe

我读过关于如何添加列表项的其他问题和文章，但这些都不起作用。以下是我的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（“按钮”）.addEventListener（“单击”，函数）（）{
var inpu=document.getElementById（“inp”）.value；//获取输入文本
var ul=document.getElementById（“lis”）；//获取列表
var li=document.createElement（“li”）；//获取新列表项
li.appendChild（document.createTextNode（inpu））；
ul.儿童（li）；
});


提交

    

  • 

'inpu'等于输入字段中的值。当您第一次加载该页面时，输入字段中没有任何值，因此列表项不会追加任何内容。
如果您将代码放入一个函数中，然后在单击按钮时调用该函数，它将工作。这样地：
html:


它成功了，非常感谢你为我节省了很多时间！我确实有一个按钮点击功能，我只是没有发布那个部分。很抱歉。

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



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