How to align checkboxes for a to do list?

Question

I am trying to make a to-do list with html/css/js for my first coding project. I used js to create a <li> element with a checkbox input inside. When I run my code, the checkbox is displayed on the right of the text displayed. I want to make it such that the checkboxes are aligned or styled to the left, but I don't know how to go about this. I am so sorry if this is a very vague qn.

 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

You are adding the checkbox after you add text to the element. a text block is also considered a node inside the element. So para.childNodes also gives you the text nodes. para.childnodes[0] is the added text from the input in your code.

By using para.insertBefore(checkBox, para.childNodes[0]); we can add the checkbox before the text node.

insertBefore allows you to insert an element before another. appendChild always adds (appends) to the end of the nodelist.

There are other ways of doing this too in the 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>