我和试图使一个基本的网页作为一个项目，不能得到我的文本显示的标签标签正在注入使用JavaScript。 如果有人有任何想法或可以指出我的正确方向，那将是伟大的。 下面是我遇到麻烦的代码片段。

let todo = [
  {
    text: "Item 1",
    completed: true,
  },
  {
    text: "Item 2",
    completed: false,
  },
  {
    text: "Item 3",
    completed: false,
  },
  {
    text: "Item 4",
    completed: false,
  },
  {
    text: "Item 5",
    completed: true,
  },
];
todo.forEach(function (todos, index) {
  const p = document.createElement("p");
  const div = document.createElement("div");
  const checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = `newTodo${index}`;
  checkBox.value = `todoItem${index}`;
  const checkBoxLabel = document.createElement("label");
  checkBoxLabel.htmlFor = `todoItem${index}`;
  checkBoxLabel.innerText = todos.text; //"This is the text that is not being rendered to the browser"
 
  document
    .querySelector("#todoItem")
    .appendChild(div)
    .appendChild(checkBox)
    .appendChild(checkBoxLabel);
});

---

顺晟科技：

您的代码实际上正在工作。但是它在复选框输入中生成标签。这就是为什么您看不到它。

问题出在以下部分

let todo = [
  {
    text: "Item 1",
    completed: true,
  },
  {
    text: "Item 2",
    completed: false,
  },
  {
    text: "Item 3",
    completed: false,
  },
  {
    text: "Item 4",
    completed: false,
  },
  {
    text: "Item 5",
    completed: true,
  },
];
todo.forEach(function (todos, index) {
  const p = document.createElement("p");
  const div = document.createElement("div");
  const checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = `newTodo${index}`;
  checkBox.value = `todoItem${index}`;
  const checkBoxLabel = document.createElement("label");
  checkBoxLabel.htmlFor = `todoItem${index}`;
  checkBoxLabel.innerText = todos.text; //"This is the text that is not being rendered to the browser"
 
  document
    .querySelector("#todoItem")
    .appendChild(div)
    .appendChild(checkBox)
    .appendChild(checkBoxLabel);
});

这会做什么？

这将首先从具有id的DOM中选择一个元素。将在内追加div。在该div中，将追加作为输入的。将在输入中附加标签。

所以您的传家宝将会是，容器内的div,在该div内，在里面。

您正在复选框内追加。它应该在同一级别的复选框中，或者输入可以放在标签中。复选框内的标签将不可见。您可以将其放置在。

的内部，也可以将两者都放置在相同的层次结构中。

在标签内放置复选框

let todo = [
  {
    text: "Item 1",
    completed: true,
  },
  {
    text: "Item 2",
    completed: false,
  },
  {
    text: "Item 3",
    completed: false,
  },
  {
    text: "Item 4",
    completed: false,
  },
  {
    text: "Item 5",
    completed: true,
  },
];
todo.forEach(function (todos, index) {
  const p = document.createElement("p");
  const div = document.createElement("div");
  const checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = `newTodo${index}`;
  checkBox.value = `todoItem${index}`;
  const checkBoxLabel = document.createElement("label");
  checkBoxLabel.htmlFor = `todoItem${index}`;
  checkBoxLabel.innerText = todos.text; //"This is the text that is not being rendered to the browser"
 
  document
    .querySelector("#todoItem")
    .appendChild(div)
    .appendChild(checkBox)
    .appendChild(checkBoxLabel);
});

这将使复选框置于标签之后。如下面的

将复选框和标签放置在具有相同层次结构的div中。

let todo = [
  {
    text: "Item 1",
    completed: true,
  },
  {
    text: "Item 2",
    completed: false,
  },
  {
    text: "Item 3",
    completed: false,
  },
  {
    text: "Item 4",
    completed: false,
  },
  {
    text: "Item 5",
    completed: true,
  },
];
todo.forEach(function (todos, index) {
  const p = document.createElement("p");
  const div = document.createElement("div");
  const checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = `newTodo${index}`;
  checkBox.value = `todoItem${index}`;
  const checkBoxLabel = document.createElement("label");
  checkBoxLabel.htmlFor = `todoItem${index}`;
  checkBoxLabel.innerText = todos.text; //"This is the text that is not being rendered to the browser"
 
  document
    .querySelector("#todoItem")
    .appendChild(div)
    .appendChild(checkBox)
    .appendChild(checkBoxLabel);
});

这将首先显示复选框，然后显示下面的标签

请找到第二个示例中的工作小提琴。