複選框不顯示值

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