Input text not being displayed on Html Page-CodePudding

I and trying to make a basic web page as a project and can not get my text to display for a label tag being injected using javaScript. If anyone has any ideas or could point me in the right direction that would be great. Here is a snippet of the code I am having trouble with.

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

CodePudding user response：

Your code is actually working. But its generating the labels inside the checkbox input. Thats why you are not able to see it.

The issue is with the below section

document
    .querySelector("#todoItem")
    .appendChild(div)
    .appendChild(checkBox)
    .appendChild(checkBoxLabel)

What this does?

This will first select an element from the DOM having id todoItem. Inside that your div will be appended. Inside that div, the checkBox which is the input, will get appended. Inside that input checkBoxLabel which is the label will be appended.

So your heirarchy will be like, div inside the container #todoItem, checkBox inside that div, checkBoxLabel inside checkBox.

You were appending checkBoxLabel inside the checkbox. It should be in the same level of checkbox OR the input can be placed inside the label. A label inside a checkbox will not be visible. You can either place the checkbox inside the label OR both checkbox and label in same hierarchy inside div.

Placing checkbox inside label

document
  .querySelector("#todoItem")
  .appendChild(div)
  .appendChild(checkBoxLabel)
  .appendChild(checkBox);

This will make the checkbox to be placed after the label. like the one below

Placing checkbox and label inside the div with same hierarchy.

div
  .appendChild(checkBox);
div
  .appendChild(checkBoxLabel);

document
  .querySelector("#todoItem")
  .appendChild(div);

This will display the checkbox first, then the label like below

Please find the working fiddle with the second example.

const 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}`;

  // added checking condition
  checkBox.checked = todos.completed;

  const checkBoxLabel = document.createElement("label");
  checkBoxLabel.htmlFor = `todoItem${index}`;
  checkBoxLabel.innerText = todos.text;

  // Place checkbox first then the label, Both on the div
  div
    .appendChild(checkBox);
  div
    .appendChild(checkBoxLabel);

  document
    .querySelector("#todoItem")
    .appendChild(div);
});

<div id="todoItem"></div>