如何添加項目到動態列表的頂部

像標題狀態一樣，有沒有人有明確的方法來實現這種類型的功能？如何添加項目到動態列表的頂部

例如：如果你去http://weewar.com，在他們的首頁你注意到一個每秒更新的ajax模塊。但是，所有新項目都被添加到列表的頂部。我的問題是圍繞着這個相同的功能。

有沒有人有一個簡單明瞭的想法，如何實現這一功能？

到目前爲止，我最初創建的列表中，那麼另一種方法就是所謂的從服務器提取最新的數據的時間間隔的方法..

不過，我堅持了，我怎麼能將新的動態節點添加到列表頂部。

如果你能引導我到哪裏可以找到該信息，或者給我一個想法，我怎麼能實現這一點，我會很高興和感激:)

在先進的感謝。

來源

2010-06-13 ericg

您是否使用JavaScript框架來進行Ajax調用？如果是這樣，哪一個？ – artlung 2010-06-13 13:17:31

如果你使用jQuery，您可以使用jQuery('#list_ID:first-child').prepend(new_item);

如果你想這樣做舊的方式方法，document.getElementById('list_ID').innerHTML = new_item + document.getElementById('list_ID').innerHTML;

或者你可以使用一個更DOM友好的方法：

var list_item = document.createElement('li'); list_item.innerHTML="Some Text" document.getElementById('list_ID').insertBefore(list_item, document.getElementById('list_ID').firstChild);

來源

2010-06-13 13:37:34

謝謝你的伴侶，你最後一個對我很好。我現在試圖不使用jquery，因爲我使用YUI。然而，yui也提供了YUI 2的一種方式，但是如何調用這個方法還不是很清楚。原生js儘管工作完美！感謝大家回答了這個問題！ – ericg 2010-06-14 04:09:21

一種方法是使用javascript重新創建列表。它像list.items = newitem + list.items。抱歉寫一個概念性的僞代碼。如果你需要知道確切的javascript，請給我一個回覆/評論。

您還可以實現在還通過以下方式相同：

var m =document.getElementById(listElement).options.length; 
for(var i = m; i>= 0 ; i = i-1) 
    document.getElementById(cmbCategory).options[i] = document.getElementById(cmbCategory).options[i-1]; 
var opt2 = new Option(); 
opt2.value="100"; /*new value */ 
opt2.text="New option text"; 
document.getElementById(listElement).options[document.getElementById(listElement).options.length] = opt2;

來源

2010-06-13 13:07:23 Kangkan

謝謝，我有同樣的想法，但是這種方法仍然將新項目添加到列表的底部。你能否擴展你的僞代碼示例？謝謝 – ericg 2010-06-13 13:14:49

嗨，按要求，我試着添加一些代碼來實現相同的。我相信這段代碼目前有一些問題。我需要重寫相同的內容。但是，您可能會嘗試獲得相同的結果。 – Kangkan 2010-06-13 13:32:36

感謝您的幫助！我會嘗試。 – ericg 2010-06-13 13:41:30

的jQuery將使它很容易爲你。這裏有一個例子：

jQuery的

$(document).ready(function(){ 
    $('<div>News 1</div>').prependTo('#textbox'); 
    $('<div>News 2</div>').prependTo('#textbox'); 
    $('<div>News 3</div>').prependTo('#textbox'); 
    $('<div>News 4</div>').prependTo('#textbox'); 
});

HTML

<div id="textbox"></div>

輸出

News 4 
News 3 
News 2 
News 1

正如你所看到的，首先添加的消息被推下。

來源

2010-06-13 13:26:50

謝謝，這種方法看起來非常直接和快速。我試圖在原生JavaScript中做到這一點。不過，我認爲這可能會更麻煩，然後我第一次想到！ – ericg 2010-06-13 13:42:40

jQuery帶走了JavaScript的很多痛苦。構建像http://weewar.com這樣的功能不會太難，因爲jQuery帶有經過驗證/測試的效果，AJAX功能等。它只是潛入並學習庫。這是花時間了。 :) – 2010-06-13 14:00:53

如何添加項目到動態列表的頂部

回答

相關問題