时间戳

首页 > 解决方案 > 如何将文本框中的用户输入添加到 HTML 列表中

javascript - 如何将文本框中的用户输入添加到 HTML 列表中

问题描述

我正在尝试将文本框中的输入添加到 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>

标签： javascripthtmlhtml-listsuser-input

解决方案

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

Element.insertAdjacentHTML()

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value; 
  var li = "<li>" + text + "</li>";
  document.getElementById("list").insertAdjacentHTML('beforeend', li);
  document.getElementById("input").value = ""; // clear the value
}
<input type='text' id='input' />
<input type='button' value='add to list' id='add' />

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

或：使用Element.innerHTML：

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value; 
  var li = "<li>" + text + "</li>";
  document.getElementById("list").innerHTML += li;
  document.getElementById("input").value = ""; // clear the value
}
<input type='text' id='input' />
<input type='button' value='add to list' id='add' />

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

虽然我更喜欢使用Document.createElement()来创建允许作为参数的 HTML 元素Node.appendChild()：

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value; 
  var li = document.createElement("li");
  li.textContent = text;
  document.getElementById("list").appendChild(li);
  document.getElementById("input").value = ""; // clear the value
}
<input type='text' id='input' />
<input type='button' value='add to list' id='add' />

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

推荐阅读