Anexar a una página web en javascript

Question

Lo que quiero hacer es que: una página web con actualización permanente de contenidos. (En mi caso está actualizando cada 2s) El nuevo contenido se agrega a la anterior en lugar de sobrescribir.

Este es el código que tengo:

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); 

Sin embargo, tanto en IE y Firefox, sólo una línea se imprime, y la página no se actualizará más. Curiosamente en Chrome, las líneas se imprimen de forma continua, que es lo que estoy buscando.

Yo sé que document.write () se llama cuando la página se carga de acuerdo con la este enlace . Así que no es definitivamente la manera de actualizar la página web de forma continua. ¿Cuál será la mejor manera de lograr lo que quiero hacer?

totalmente novato en Javascript. Gracias.

Lily

Answer 1

Se puede anexar a la propiedad innerHTML:

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

Este código anexar el mensaje a un elemento con un id de console, como

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

Por cierto, es una mala práctica a setInterval llamada con una cadena.

En su lugar, pasar a la función en sí, así:

var my_interval = setInterval(send_msg, 2000); 

Answer 2

Yo empezaría por buscar en la biblioteca jQuery. Esto le ahorrará mucho dolor.

Lo que se quiere hacer es mantener las líneas insertadas en una tabla, utilizando, por ejemplo:

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

Answer 3

Me tendría un div o algún otro recipiente, por ejemplo:

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

A continuación, escribir en él como el uso de .innerHTML , así:

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); 

Se puede ver un ejemplo práctico de esto aquí

Answer 4

Esta sería una excelente oportunidad para aprender un poco de programación DOM.

Usando el DOM para actualizar la página debe resultar en menos sobrecarga que simplemente concatenando más HTML en ella. Encontrar el nodo que desea poner los cambios en y efectuará un appendChild en cada adición posterior.

Answer 5

Las respuestas a esta pregunta puede ser útil: ¿Qué es una forma sencilla de web-ify mi demonio de línea de comandos?