Append to a webpage in javascript

Question

What I want to do is that: a webpage with continuously updating content. (In my case is updating every 2s) New content is appended to the old one instead of overwriting.

Here is the code I have:

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

However, in both IE and Firefox, only one line is printed out, and the page will not be updated anymore. Interestingly in Chrome, the lines are being printed out continuously, which is what I am looking for.

I know that document.write() is called when the page is loaded according to this link. So it's definitely not the way to update the webpage continuously. What will be the best way to achieve what I want to do?

Totally newbie in Javascript. Thank you.

Lily

Answer 1

You can append to the innerHTML property:

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

This code will append the message to an element with an id of console, such as

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

By the way, it is bad practice to call setInterval with a string.

Instead, pass the function itself, like this:

var my_interval = setInterval(send_msg, 2000); 

Answer 2

I would start by looking at the jQuery library. This will save you a lot of pain.

What you want to do is keep inserted lines into a table, using eg:

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

Answer 3

I would have a div or some other container, like this:

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

Then write to it like using .innerHTML, like this:

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 4

This would be an excellent opportunity for you to learn a little DOM programming.

Using the DOM to update the page should result in less overhead than simply concatenating more HTML into it. Find the node you want to put the updates into, and do an appendChild on each subsequent addition.

Answer 5

The answers to this question may be helpful: What's a simple way to web-ify my command-line daemon?