Append à une page Web en javascript

Question

Ce que je veux faire est que: une page web avec un contenu de mise à jour en continu. (Dans mon cas, la mise à jour est tous les 2 s) Le nouveau contenu est ajouté à l'ancien 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. Il est intéressant de Chrome, les lignes sont en cours d'impression en continu, ce qui est ce que je cherche.

Je sais que document.write () est appelée lorsque la page est chargée selon ce lien . Il est donc certainement pas la façon de mettre à jour la page Web en permanence. Quelle sera la meilleure façon d'obtenir ce que je veux faire?

newbie totalement en Javascript. Merci.

Lily

Answer 1

Vous pouvez ajouter à la propriété innerHTML:

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 une mauvaise pratique à l'appel 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

Je commence en regardant la bibliothèque jQuery. Cela vous permettra d'économiser beaucoup de douleur.

Qu'est-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 3

Je un div ou un autre récipient, comme ceci:

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

Ensuite, écrire à l'aide comme .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); 

Vous pouvez voir un exemple de travail de cette

Answer 4

Ce serait une excellente occasion pour vous d'apprendre un peu de programmation DOM.

Utilisation du DOM pour mettre à jour la page devrait se traduire par moins de frais généraux que simplement concaténer plus HTML en elle. Recherchez le nœud que vous voulez mettre les mises à jour dans et faire une appendChild chaque ajout ultérieur.

Answer 5

Les réponses à cette question peut être utile:

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow