Comment ajouter un élément au début d'une liste dynamique

Question

Comme le titre l'indique, est-ce que quelqu'un a un moyen clair d'implémenter ce type de fonctionnalité?

Exemple: Si vous allez à http://weewar.com, dans leur première page, vous avez remarqué un module ajax qui se met à jour toutes les secondes. Cependant, tous les nouveaux éléments sont ajoutés en haut de la liste. Ma question concerne cette même fonctionnalité.

Quelqu'un a-t-il une idée simple et claire de la façon dont on pourrait implémenter cette fonctionnalité?

Jusqu'à présent, j'ai une méthode qui crée d'abord la liste, puis une autre méthode est appelée dans un intervalle qui tire les données les plus récentes du serveur ..

Cependant, je suis coincé avec, comment puis-je ajoutez le nouveau noeud dynamique en haut de la liste.

Si vous pouvez me guider là où je peux trouver ces informations ou me donner une idée de la façon dont je peux mettre en œuvre ce que je serai très heureux et reconnaissant :)

Merci d'avance.

Answer 1

Si vous utilisez jQuery, vous pouvez utiliser jQuery('#list_ID:first-child').prepend(new_item);

Si vous voulez le faire à l'ancienne mode, document.getElementById('list_ID').innerHTML = new_item + document.getElementById('list_ID').innerHTML;

Ou vous pouvez utiliser une méthode plus respectueuse DOM:

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

Answer 2

Une manière sera de recréer la liste en utilisant javascript. C'est comme list.items = newitem + list.items. Désolé d'avoir écrit un pseudo code conceptuel. Si vous avez besoin de connaître le javascript exact, envoyez-moi une réponse/un commentaire.

Vous pouvez également mettre en œuvre le même de la manière suivante aussi:

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; 

Answer 3

jQuery, il serait assez facile pour vous. Voici un exemple:

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> 

Sortie

News 4 
News 3 
News 2 
News 1 

Comme vous pouvez le voir, les nouvelles qui ont été ajoutées en premier sont repoussées vers le bas.