htmlの "Insertbefore"関数

Question

新しい単語を順序付きリストに追加するのに 'insertbefore'関数を使う必要がありますが、あらかじめ定義された単語 "water"を任意の単語に変更する方法はわかりません。あなたがテキストボックスに名前を追加する場合

コード

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]); 
} 

Answer 1

あなたは以下行うことができます。この回答は注文を考慮に入れておらず、挿入だけを考慮しています。

<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>