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

Question

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

javascripthtml

4

正如标题所述，是否有人有清晰的方法来实现这种类型的功能？

例如：如果您访问http://weewar.com，在他们的首页上，您会注意到一个每秒更新一次的ajax模块。然而，所有新项目都添加到列表顶部。我的问题就是围绕着这个功能。

有没有人有关于如何实现这个功能的简单明了的想法？

到目前为止，我有一个方法最初创建列表，然后在间隔中调用另一个方法从服务器拉取最新数据..

然而，我卡在了如何将新的动态节点添加到列表顶部。

如果您可以指导我在哪里找到这些信息或给我一个关于如何实现这个功能的想法，我将非常高兴和感激。

- ericg

你是否使用JavaScript框架来进行Ajax调用？如果是，那么使用的是哪一个框架？ - artlung

3个回答

2

如果你使用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="一些文本"
document.getElementById('list_ID').insertBefore(list_item, document.getElementById('list_ID').firstChild);

- Aaron Butacov

谢谢，伙计！你上次的代码对我非常有用。我现在尽量不使用jQuery，因为我使用YUI。然而，YUI也提供了一种方法在YUI 2中实现，但是如何调用该方法并不是很清楚。旧的本地js代码却完美运行！感谢所有回答这个问题的人！ - ericg

0

一种方法是使用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;

- Kangkan

1

谢谢，我有同样的想法，但是这种方法仍然将新项目添加到列表的底部。你能否请详细说明一下你的伪代码示例？谢谢。 - ericg

你好，根据要求，我尝试添加一些代码来实现相同的功能。我相信目前代码存在一些问题。我需要重写它。但是你可以尝试获取它。 - Kangkan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gert Grenander · Accepted Answer

如果涉及到IT技术，您可以使用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

如您所见，先添加的新闻会被推到下方。