Ajouter à une page Web en javascript

Question

Ce que je veux faire c'est: une page web avec un contenu continuellement mis à jour. (Dans mon cas est mise à jour toutes les 2s) Nouveau contenu est ajouté à l'ancien au lieu d'écraser.

Voici le code que j'ai:

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>", 
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>" 
); 
var number = 0; 
function send_msg() 
{ 
document.write(number + " " + msg_list[number%4]+'<br/>'); 
number = number + 1; 
} 
var my_interval = setInterval('send_msg()', 2000); 

Cependant, dans les deux IE et Firefox, une seule ligne est imprimé, et la page ne sera pas mis à jour plus. Fait intéressant dans Chrome, les lignes sont imprimées en continu, ce que je recherche.

Je sais que document.write() est appelé lorsque la page est chargée selon this link. Donc, ce n'est certainement pas la façon de mettre à jour la page Web en continu. Quel sera le meilleur moyen de réaliser ce que je veux faire?

Totalement novice en Javascript. Je vous remercie.

Lily

Answer 1

Vous pouvez ajouter à la innerHTML propriété:

var number = 0; 
function send_msg() 
{ 
    document.getElementById('console').innerHTML += (number + " " + msg_list[number%4]+'<br/>'); 
    number = number + 1; 
} 

Ce code ajoute le message à un élément avec un id de console, comme

<div id="console"></div> 

Par ailleurs, il est mauvais Entraînez-vous à appeler setInterval avec une chaîne.

Au lieu de cela, passer la fonction elle-même, comme ceci:

var my_interval = setInterval(send_msg, 2000); 

Answer 2

Les réponses à cette question peut être utile: What's a simple way to web-ify my command-line daemon?

Answer 3

Je commencerais en regardant la bibliothèque jQuery. Cela vous épargnera beaucoup de douleur.

Ce que vous voulez faire est de garder les lignes insérées dans une table, en utilisant par exemple:

$('table tbody').append('<tr><td>some value</td></tr>'); 

Answer 4

j'aurais un div ou un autre récipient, comme ceci:

<div id="msgDiv"></div> 

ensuite écrire comme en utilisant .innerHTML, comme ceci:

var msg_list = new Array(
    "<message>Hello, Clare</message>", "<message>Hello,Lily</message>", 
    "<message>Hello, Kevin</message>", "<message>Hello, Bill</message>" 
); 
var number = 0; 
function send_msg() 
{ 
    document.getElementById("msgDiv").innerHTML += number + " " + msg_list[number%4]+'<br/>'; 
    number++; 
} 
var my_interval = setInterval(send_msg, 2000); 

You can see a working example of this here

Answer 5

Ce serait une excellente occasion pour vous d'apprendre un peu de programmation DOM. L'utilisation du DOM pour mettre à jour la page devrait entraîner moins de frais généraux que la simple concaténation de plus de HTML dans le DOM. Recherchez le noeud dans lequel vous souhaitez placer les mises à jour et effectuez appendChild à chaque ajout ultérieur.