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

“list”标签位于bodyHTML 文档的内部……“list”标签包含超过 5000 个 div……因为它是一个非常大的数字，我展示了其中的一部分……

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

请不要使用任何 jQuery ......只有 Javascript ......

4

3 回答 3

2 
 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');

小提琴

于 2012-10-02T18:06:49.147 回答
2

您使用的是 div 而不是 ul/li 似乎很奇怪。这是您可以做的一种方法。

var words = document.getElementById("wordsList")
var indexes = null;
function InsertItem​(word) {
    if (!indexes) {
        getItems();
    }        
    indexes.push(word);
    console.log(indexes);
    indexes.sort();
    var position = indexes.indexOf(word);
    var list = words.getElementsByTagName("div");    
    var newDiv = document.createElement("div");
    newDiv.innerHTML = word;
    words.insertBefore(newDiv, list[position]);
}
function getItems(){
    var elems = words.getElementsByTagName("div");
    indexes = [];
    for (var i=0;i<elems.length;i++) {
        indexes.push(elems[i].innerHTML);
    }
}

InsertItem("apple");
InsertItem("aaaaa");
InsertItem("zzzzz");
​

JSFiddle

于 2012-10-02T18:08:23.513 回答
0

正如您在要插入什么 div-nr 之前似乎知道的那样，您可以使用： insertBefore(node,yourlist.childNodes[(nr-1)*2])

<!DOCTYPE html>
<meta charset=UTF-8>
<title>Insert</title>

<list id=alist>
<div>abacus</div>
<div>abstract paint</div>
<div>australian coco</div>
<div>mango</div>
<div>parrot</div>
<div>salt</div>
<div>upi</div>
</list>

<script>
var nr = 3,//insert before the third div
alist = document.getElementById('alist'),
node = document.createElement('div');
node.innerHTML = 'apache';

alist.insertBefore(node,alist.childNodes[(nr-1)*2]);
</script>
于 2012-10-02T18:53:56.093 回答