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>

“list”标签位于HTML文档的body内...“list”标签包含超过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

Answer 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

Answer 3

正如您在想要插入的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>

在div的排序列表中插入新项

3 个答案: