Question

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

Answer 1

由于您尝试将 htmlString 附加到元素中，请尝试使用Element.innerHTML：

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value; 
  var li = "<li>" + text + "</li>";
  document.getElementById("list").innerHTML += li;
}

<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()创建Node.appendChild()允许作为参数的HTML元素：

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value; 
  var li = document.createElement("li");
  li.textContent = 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>

Answer 2

使用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>

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

2 个答案: