Like the title states, does anyone out there have a clear way to implement this type of functionality?

Example: If you go to , in their front page you noticed an ajax module that updates every second. However, all of the new items are added to the top of the list. My question is around that very same functionality.

Does anyone have an easy and clear idea as to how one would implement this functionality?

So far I have a method that initially creates the list, then another method is called in an interval that pulls the most recent data from the server..

However, I'm stuck with, how can I add the new dynamic node to the top of the list.

If you can guide me to where I can find this information or give me an idea as to how I can implement this I will be very happy and grateful.

Like the title states, does anyone out there have a clear way to implement this type of functionality?

Example: If you go to http://weewar., in their front page you noticed an ajax module that updates every second. However, all of the new items are added to the top of the list. My question is around that very same functionality.

Does anyone have an easy and clear idea as to how one would implement this functionality?

So far I have a method that initially creates the list, then another method is called in an interval that pulls the most recent data from the server..

However, I'm stuck with, how can I add the new dynamic node to the top of the list.

If you can guide me to where I can find this information or give me an idea as to how I can implement this I will be very happy and grateful.

• javascript
• html

Share Improve this question Follow edited May 31, 2018 at 10:30 Donald Duck is with Ukraine 8,9322323 gold badges7979 silver badges103103 bronze badges asked Jun 13, 2010 at 13:01 ericgericg 6377 bronze badges 1

• Are you using a JavaScript framework to make your Ajax calls? If so, which one? – artlung Commented Jun 13, 2010 at 13:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

jQuery would make it pretty easy for you. Here's an example:

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>

Output

News 4
News 3
News 2
News 1

As you can see, the news that was added first gets pushed downwards.

If you use jQuery you can use jQuery('#list_ID:first-child').prepend(new_item);

If you want to do it the old fashion way, document.getElementById('list_ID').innerHTML = new_item + document.getElementById('list_ID').innerHTML;

Or you can use a more DOM friendly method:

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

One way will be to recreate the list using javascript. Its like list.items=newitem+list.items. Sorry for writing a conceptual pseudo code. If you need to know the exact javascript, please send me a reply/ment.

You can also implement the same in the following way also:

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;