How do I add user input to a checklist but then put it in a shortcut?

I would like to add user input to a list containing a shortcut that contains an input of type "checkbox"?

I've seen other questions and used their code, but they don't work. Nothing happens when I click Add.

Here is the JavaScript I found at W3Schools, and in a similar question for myself, as well as the W3Schools link:

https://www.w3schools.com/jsref/met_node_insertbefore.asp

function addToList() {
    var li = document.createElement("LI");
    var userInput = document.getElementById("userInput").value;
    var text = document.createTextNode(userInput);
    li.appendChild(text);
}

      

        
        
        
      

    

I think . I understand that with this code, I will not be placing the user input inside the input tag and then the label, so I would like to know if there is a way to do this.

Here's my JavaScript if you want to see it:

function addToList() {
    var li = document.createElement("LI");
    var userInput = document.getElementById("userInput").value;
    var text = document.createTextNode(userInput);
    li.appendChild(text);

    var list = document.getElementById("cntr_List");
    list.insertBefore(li, list.childNodes[0]);
}

      

        
        
        
      

    

Here is the list itself (HTML of course) along with an input for the text:

<div class="center" id="cntr">
    <div class="header">
        <h2>Add an item</h2>
        <input type="text" id="userInput" style="width: 100%;" placeholder = "Add new task...">
            <span onclick="addToList()" style="cursor: pointer;" id="addBtn" >Add</span>
        </div>
        <ol style="list-style-type:none" id="cntr_list">
            <li><label onclick="openNav()"><input type="checkbox" value="ON" class="test" /> Item 1</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 2</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 3</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 4</label></li>
            <li><label><input type="checkbox" value="ON" class="test" /> Item 5</label></li>
        </ol>
</div>

      

        
        
        
      

    

If what I am doing is not possible or bad HTML / JavaScript please forgive me because I am still involved. I am more than open to any suggestions you have that will give me the same or similar results. If there is no way to achieve what I am trying to achieve, feel free to talk about it and tell me why.