title: Inserting a new list item into its correct alphabetical position
body: <p>I'm wondering what is the most efficient way of inserting an item (in this case, a string), into its correct alphabetical order, with ONLY JavaScript (not jQuery)? I thought that by sorting the list straight after inserting the item would be sufficient, but doesn't work. I am getting the value to be inserted via a value entered into a textfield.</p>
  
  <p>Before inserting the new item, the list looks like:</p>
  
  <ul>
  <li>Albatross</li>
  <li>Fantail</li>
  <li>Kea</li>
  <li>Kiwi</li>
  <li>Takahe</li>
  <li>Tui</li>
  </ul>
  
  <p>If I choose to add "Bellbird" to this list, I would expect the list to now look like:</p>
  
  <ul>
  <li>Albatross</li>
  <li>Bellbird</li>
  <li>Fantail</li>
  <li>Kea</li>
  <li>Kiwi</li>
  <li>Takahe</li>
  <li>Tui</li>
  </ul>
  
  <p>Here is the code I am using to try and achieve the desired outcome:</p>
  
  <p><em><strong>HTML:</em></strong></p>
  
  <pre><code>&lt;ul id="birds"&gt;
    &lt;li&gt;Albatross&lt;/li&gt;
    &lt;li&gt;Fantail&lt;/li&gt;
    &lt;li&gt;Kea&lt;/li&gt;
    &lt;li&gt;Kiwi&lt;/li&gt;
    &lt;li&gt;Takahe&lt;/li&gt;
    &lt;li&gt;Tui&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;p&gt;&lt;label for="addNewBirdField"&gt;Add new bird: &lt;/label&gt;
     &lt;input type="text" id="addNewBirdField" /&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;button id ="addItem"&gt;Add new bird&lt;/button&gt;&lt;/p&gt;
  </code></pre>
  
  <p><em><strong>JavaScript:</em></strong></p>
  
  <pre><code>function addNewBird()
  {
    var birdList = document.getElementById("birds"); //get birds unordered list
  
    var newBirdItem = document.createElement("li"); // create new li element
  
    var bird = document.getElementById("addNewBirdField").value // get data from form field
  
    var birdValue = document.createTextNode(bird); // create new textNode with value from previous step
  
    newBirdItem.appendChild(birdValue); // append textNode from previous step to li element (newBirdItem)
  
    birdList.appendChild(newBirdItem); // append li element to bird list
  
    birdList.sort();
  }
  
  var addItem = document.getElementById("addItem");
  addItem.onclick = addNewBird;
  </code></pre>
  
  <p>I've looked at <a href="http://www.javascriptkit.com/javatutors/arraysort.shtml" rel="noreferrer">this link</a> at sorting arrays (I am assuming with my knowledge on programming that each list element is in an array). I understand what lexicographically sorting is - I learned this earlier this week. </p>
  
  <p>If anyone can help me out on this one  would be very grateful. </p>