Fatal编程技术网
  • javascript/
  • Javascript 如何在HTML中将用户输入从文本框添加到列表

Javascript 如何在HTML中将用户输入从文本框添加到列表

javascript html

Javascript 如何在HTML中将用户输入从文本框添加到列表,javascript,html,html-lists,user-input,Javascript,Html,Html Lists,User Input,我正在尝试将文本框中的输入添加到HTML列表中。我尝试了一些方法，搜索了其他堆栈溢出问题，得到了下面的代码。用户输入有效，但不输出到列表。总的来说，我希望代码能够让列表显示输入到文本框中的所有项目 <!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> document.getElementById("add").o

我正在尝试将文本框中的输入添加到HTML列表中。我尝试了一些方法，搜索了其他堆栈溢出问题，得到了下面的代码。用户输入有效，但不输出到列表。总的来说，我希望代码能够让列表显示输入到文本框中的所有项目

<!DOCTYPE html>
<html>
<head>

</head>
<body>


  <script type="text/javascript">

document.getElementById("add").onclick = function() {

    var text = document.getElementById("input").value; 
    var li = "<li>" + text + "</li>";


    document.getElementById("list").appendChild(li);
}

</script>

<input type='text' id='input' />
<input type='button' value='add to list' id='add' />

<ul id='list'>
  <li> <b>Topics</b></li> 
  </ul>

</body>
</html>


document.getElementById（“add”）.onclick=function（）{
var text=document.getElementById（“输入”）.value；
var li=“
  • ”+文本+”
    • ”；
文件.getElementById（“列表”）.appendChild（li）；
}


  • 主题
    •
    由于您试图将htmlString附加到元素中，请尝试使用

    document.getElementById（“add”）.onclick=function（）{
var text=document.getElementById（“输入”）.value；
var li=“
  • ”+文本+”
    • ”；
document.getElementById（“list”）.insertAdjacentHTML（'beforeend'，li）；
document.getElementById（“输入”）.value=”“；//清除该值
}
    


  • 主题
    •
    使用
    document.createElement（）
    创建标记名指定的HTML元素

    document.getElementById（“add”）.onclick=function（）{
var text=document.getElementById（“输入”）.value；
var li=document.createElement（“li”）；
li.innerText=文本；
文件.getElementById（“列表”）.appendChild（li）；
}
    


  • 话题
    •
    您试图附加的是
    字符串，而不是
    节点。appendChild（）方法将节点作为节点的最后一个子节点进行追加。当我在此处运行代码段时，代码工作正常，但当我将其转移到代码编辑器时，代码失败。有没有办法查看更新部分的完整代码？对不起，我说错了。没有错误，只是没有将文本框中的文本输出到列表中。不过这个网站上的代码片段很好用。@MaxMuchnick不必担心有没有办法找到完整的更新代码？当我复制代码段并将其粘贴到我的旧代码上时，它不起作用，所以我一定是复制错了。