使用 JavaScript 问题的待办事项列表答案

【问题标题】：To do list using JavaScript problems使用 JavaScript 问题的待办事项列表
【发布时间】：2017-05-18 14:04:23
【问题描述】：

我正在尝试使用 JavaScript 创建一个“待办事项列表”，但它不起作用。我尝试了不同的方法，但它不起作用。请帮忙。谢谢！

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

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

【问题讨论】：

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop的可能重复

标签： javascript html

【解决方案1】：

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

未捕获的类型错误：无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型。在 HTMLInputElement.document.getElementById.onclick

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

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);
}

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

【讨论】：

你的代码在这个“运行代码 sn-p”的东西上工作，但是当我将它复制并粘贴到记事本++中时它不起作用。帮忙？
我看不出你做错了什么。控制台是否抱怨尝试访问 null 的 onclick？ stackoverflow.com/questions/14028959/…

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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);
        }

你可以这样做

【讨论】：

你能告诉我吗？怎么了？我试过了，效果很好。