如何添加项目到动态列表的顶部

像标题状态一样，有没有人有明确的方法来实现这种类型的功能？如何添加项目到动态列表的顶部

例如：如果你去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

如何添加项目到动态列表的顶部

回答

相关问题