Как настроить флажки для списка дел?

Question

Я пытаюсь создать список дел с помощью html / css / js для моего первого проекта кодирования. Я использовал js, чтобы создать элемент <li> с флажком внутри. Когда я запускаю свой код, флажок отображается справа от отображаемого текста. Я хочу сделать так, чтобы флажки были выровнены или стилизованы влево, но я не знаю, как go об этом. Мне очень жаль, если это очень расплывчато.

function printInput() {
  var toDoInput = document.getElementById("textbox").value;
  var para = document.createElement("li");
  para.innerText = toDoInput;
  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.className = "cb";
  para.appendChild(checkBox);
  document.getElementById("paragraph").appendChild(para);
}

function enter() {
  if (event.keyCode === 13) {
    document.getElementById("enterButton ").click();
  }
}

.container {
  border-style: dashed;
  border-width: 4px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 40%;
  padding-bottom: 20%;
}

li {
  list-style-type: none;
}

#paragraph {
  width: 100%;
  clear: both;
  margin: 0;
  padding: 8px 0 8px 10px;
}

.container {
  width: 500px;
  clear: both;
  display: table;
}

li {
  display: flex;
  border-bottom: 1px solid #cfcbcc;
}

h1 {
  text-align: center;
}

<h1> What will you do today? </h1>
<div class="container">
  <input class="inputBox" id="textbox" type="text" onkeypress="enter()" placeholder="Bake a cake">
  <input onclick="printInput()" class="inputBox" id="enterButton" type="button" value="Enter" id="enterButton">
  <ul id=paragraph></ul>
</div>

Answer 1

Вы добавляете флажок после добавления текста в элемент. текстовый блок также считается узлом внутри элемента. Так что para.childNodes также дает вам текстовые узлы. para.childnodes[0] - это добавленный текст из ввода в вашем коде.

Используя para.insertBefore(checkBox, para.childNodes[0]);, мы можем добавить флажок перед текстовым узлом.

insertBefore позволяет вставить элемент перед другим. appendChild всегда добавляет (добавляет) в конец списка узлов.

Есть и другие способы сделать это в DOM.

function printInput() {
  var toDoInput = document.getElementById("textbox").value;
  var para = document.createElement("li");
  para.innerText = toDoInput;
  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.className = "cb";
  //this line will insert the checkbox before the text node
  para.insertBefore(checkBox, para.childNodes[0]);
  document.getElementById("paragraph").appendChild(para);
}

function enter() {
  if (event.keyCode === 13) {
    document.getElementById("enterButton ").click();
  }
}

.container {
  border-style: dashed;
  border-width: 4px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 40%;
  padding-bottom: 20%;
}

li {
  list-style-type: none;
}

#paragraph {
  width: 100%;
  clear: both;
  margin: 0;
  padding: 8px 0 8px 10px;
}

.container {
  width: 500px;
  clear: both;
  display: table;
}

li {
  display: flex;
  border-bottom: 1px solid #cfcbcc;
}

h1 {
  text-align: center;
}

<h1> What will you do today? </h1>
<div class="container">
  <input class="inputBox" id="textbox" type="text" onkeypress="enter()" placeholder="Bake a cake">
  <input onclick="printInput()" class="inputBox" id="enterButton" type="button" value="Enter" id="enterButton">
  <ul id=paragraph></ul>
</div>