Q:

"Insertbefore" function in html

I need to use the 'insertbefore' function to add new words in an ordered list, but don't know how to change the predefined word "water" to any optional word.
Code
function myFunction() {
    var newItem = document.createElement("li");
    var textnode = document.createTextNode("water");
    newItem.appendChild(textnode);

    var list = document.getElementById("Course registration");
    list.insertBefore(newItem, list.childNodes[0]);
}

A:

If you add a name to the textbox you could do the below. Note that this answer doesn't take the ordering into account, just the insert.
<div id="myDIV" class="header">
 <input name="txtboxName" type="text" id="myInput" placeholder="Add a task here">
  <button onclick="myFunction()">Add</button>
</div>

<ol id="Course registration">
  <li>Register to full Stack Web Course</li>
  <li>Attend Selection Day</li>
  <li>Go see X-Men apocalypse movie</li>
</ol>

<script>
function myFunction() {
    var newItem = document.createElement("li");
    var textnode = document.createTextNode(document.getElementsByName('txtboxName')[0].value);
    newItem.appendChild(textnode);

    var list = document.getElementById("Course registration");
    list.insertBefore(newItem, list.childNodes[0]);
}
</script>

