Travesing the DOM - Alphabetically
<p>I have a list of links/image pairs in a page.  </p>

<p>For example, social page below has two links - Twitter, Facebook...the image didn't capture the name.  </p>

<p>I need to traverse these and do and insert alphabetically.</p>

<p>So I grab the page ID as follows:</p>

<pre><code>var element_iterator = document.getElementById( 'social_page' );
</code></pre>

<p>Now I have the "page' containing the two links Twiiter and Facebook.  Say i want to inset Quora, how do I traverse this to find the insert point.</p>

<p>How can I traverse the DOM and to and alphaetical insert based on title. </p>

<p><strong>Broken Code</strong></p>

<pre><code>var page_element = document.getElementById( form_elements.tag.value + '_page' );
var element_iterator = page_element.firstChild;    
while( !!( element_iterator = element_iterator.nextSibling ) )
{
    if( typeof element_iterator.tagName === 'undefined' )
    {
        page_element.insertBefore( image_element, element_iterator );
        page_element.insertBefore( link_element, element_iterator );
        break;
    }
    else if( element_iterator.tagName.toLowerCase() === 'a' &amp;&amp; ( link_element.innerHTML&lt;element_iterator.innerHTML ) )
    {
        element_iterator = element_iterator.previousSibling;
        page_element.insertBefore( image_element, element_iterator );
        page_element.insertBefore( link_element, element_iterator );
        break;
    }
}
</code></pre>

<p><img src="http://i.stack.imgur.com/sxKfg.png" alt="DOM"></p>
