复选框不显示值

Question

我已成立了以香草JS

https://jsfiddle.net/mz9ecc3d/一个简单的待办事项（边注，你如何让JavaScript和HTML中的jsfiddle链接？似乎并没有认识到我的功能）

let input = document.getElementById('todoInput').value; 
    let checkbox = document.createElement("input") 
    checkbox.type = 'checkbox' 
    let label = document.createElement("label") 
    label.textContent = input 
    checkbox.appendChild(label) 
    let output = document.getElementById('todoList'); 
    output.appendChild(checkbox) 

然而，当地我可以出现在复选框，但旁边没有价值。我无法解决为什么和阅读某处我可能需要一个标签，所以附加了这一点，它都正确地通过控制台，只是在屏幕上显示一个旁边没有任何东西的复选框？

Answer 1

checkbox.appendChild(label) 

输入元件是无效的元素。他们不能生孩子。

如果你想把标签放在复选框的旁边，那么你必须把它放在的下一个而不是它里面。

output.appendChild(checkbox); 
output.appendChild(label); 

也就是说，标签需要与表单控件相关联。

有两种方法做到这一点：

随着对属性

checkbox.setAttribute("id", "something_unique"); 
label.setAttribute("for", "something_unique"); 
output.appendChild(checkbox); 
output.appendChild(label); 

...但需要您生成每次一个唯一的ID。

通过将复选框标签

let input = document.getElementById('todoInput').value; 

let checkbox = document.createElement("input") 
checkbox.type = 'checkbox' 

let label = document.createElement("label") 
label.appendChild(checkbox); 
label.appendChild(document.createTextNode(input)); 

let output = document.getElementById('todoList'); 
output.appendChild(label) 

里面......所以，在结论：将复选框的标签，而不是在它旁边里面。

Answer 2

这里是固定功能：

function addTodo() { 
    let input = document.getElementById('todoInput').value; 
    let checkbox = document.createElement("input") 
    checkbox.type = 'checkbox' 
    let label = document.createElement("label") 
    label.textContent = input 
    label.appendChild(checkbox) 
    let output = document.getElementById('todoList'); 
    output.appendChild(label) 
} 

和更新jsFiddle