如何将用户输入从文本框中添加到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>

，因为您试图将 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>

使用document.createElement()创建由TagName指定的HTML元素

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value;
  var li = document.createElement("li");
  li.innerText = text;
  document.getElementById("list").appendChild(li);
}

<input type='text' id='input' />
<input type='button' value='add to list' id='add' />
<ul id='list'>
  <li> <b>Topics</b></li>
</ul>

相关内容

最新更新

热门标签：