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>