how do I add a checkbox before every list Item, and a delete button after the list item?

I created a to do list with HTML/Javascript. How do add a checkbox on the left of every Item added to the list and a X button to the right of every item added to delete it from the list. This is what I got so far

var inputItem = document.getElementById("inputItem");
inputItem.focus();

// adds input Item to list
function addItem(list, input) {

  var inputItem = this.inputItem;
  var list = document.getElementById(list);
  var listItem = document.createElement("li");
  listItem.innerText = input.value;
  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
  return false;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>


</head>
<body>
<h1>To-Do List</h1>

<form onsubmit="return addItem('list', this.inputItem)">
    <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
    <input type="submit">

</form>

<ul id="list">

</ul>


</body>
</html>

Solution

Continuing using the same technique you were before, just keep creating the elements you need and appending them to the list item.

var inputItem = document.getElementById("inputItem");
inputItem.focus();

// adds input Item to list
function addItem(list, input) {
  var inputItem = this.inputItem;
  var list = document.getElementById(list);
  var listItem = document.createElement("li");
  
  // Configure the delete button
  var deleteButton = document.createElement("button");
  deleteButton.innerText = "X";
  deleteButton.addEventListener("click", function() {
    console.log("Delete code!");
  });
  
  // Configure the check box
  var checkBox = document.createElement("input");
  checkBox.type = 'checkbox';
  
  // Configure the label
  var label = document.createElement("label");
  var labelText = document.createElement("span");
  labelText.innerText = input.value;
  
  // Put the checkbox and label text in to the label element
  label.appendChild(checkBox);
  label.appendChild(labelText);
  
  // Put the label (with the checkbox inside) and the delete
  // button into the list item.
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);
  
  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
  return false;

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
</head>

<body>
  <h1>To-Do List</h1>
  <form onsubmit="return addItem('list', this.inputItem)">
    <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
    <input type="submit">
  </form>
  <ul id="list">
  </ul>
</body>

</html>