Question

我试图做一个＆＃34;待办事项列表＆＃34;使用JavaScript，它没有工作。我尝试了不同的东西，但它不会工作。请帮助。谢谢！

＆＃13;

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

＆＃13;

<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>

＆＃13;

Answer 1

在浏览器中打开开发人员工具。看看控制台。

未捕获的TypeError：无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点＆＃39;。在HTMLInputElement.document.getElementById.onclick

您正在将字符串传递给appendChild，但它所期望的值是节点，例如元素。

＆＃13;

document.getElementById("button").onclick = function() {
  var text = document.getElementById("text").value;
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(text));
  document.getElementById("list").appendChild(li);
}

＆＃13;

<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>

＆＃13;

Answer 2

你也可以使用 innerHTML 来做到这一点，如下所示：

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

<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>

Answer 3

就像Quentin所说但你不需要创建节点，你可以直接追加带有函数insertAdjacentHTML的字符串

＆＃13;

document.getElementById("button").onclick = function() {
				var text = document.getElementById("text").value;
				var li = "<li>" + text + "</li>";
				document.getElementById("list").insertAdjacentHTML("beforeend", li);
			}

＆＃13;

<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>

＆＃13;

Answer 4

<input type="text" id="text"><input type="button" id="button" value="Write">

document.getElementById("button").onclick = function() {
            var node = document.createElement("li");                
            var textnode = document.createTextNode(document.getElementById("text").value);    
            node.appendChild(textnode);                             
            document.getElementById("list").appendChild(node);
        }

你可以这样做

使用JavaScript问题列表

4 个答案: