复选框不显示值

Question

我在vanilla js中设置了一个简单的待办事项

https://jsfiddle.net/mz9ecc3d/（快速注意，如何在jsfiddle中链接javascript和html？似乎无法识别我的功能）

  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)

输入元素是void元素。他们不能生孩子。

如果您想将标签放在复选框旁边，那么您必须将 next 放在其中，而不是在其中。

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

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

有两种方法可以做到：

使用for属性

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