javascript - 在已排序的 div 列表中插入新项目

Question

<list>
    <div>abacus</div>
    <div>abstract paint</div>
    <div>australian coco</div>
     .........
     .........
     .........
    <div>mango</div>
    <div>parrot</div>
    <div>salt</div>
    <div>upi</div>
</list>

“列表”标签在 body 内一个 HTML 文档...“列表”标签包含超过 5000 个 div...因为它是一个非常大的数字，我展示了其中的一部分...

我需要根据这些 div <div>apache</div> 按字母顺序在这些 div 中插入一个新的 div(如 innerHTML) ( innerHTML 只包含字母和数字，没有符号)...但问题是如果我使用 insertBefore()方法，我将在列表末尾获取 div...我该怎么做...？？

请不要使用任何 jQuery...仅使用 Javascript...

Answer 1

 var list         = document.getElementsByTagName('list')[ 0 ],
     DOMitems     = list.getElementsByTagName('div'),
     items        = Array.prototype.slice.call( DOMitems );

function addItem( text ) {
    var position          = 0,
        newElem           = document.createElement('div');
        newElem.innerHTML = text;

    items.push( newElem );
    items.sort(function( a, b ) {
        return a.innerHTML.localeCompare( b.innerHTML );
    });

    position = items.indexOf( newElem );
    list.insertBefore( newElem, DOMitems[ position ] );
}

addItem('apache');

Fiddle