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

score 2 · Answer 1 · answered Apr 28 '10 at 22:39

2

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

answered Apr 28 '10 at 22:39

Nick Craver

623,446
136
1,297
1,155

@Nick, I thought about your solution before, but the thing is only one line will be displayed, and new one will be overwriting the old one. What I want to do is to print out all the lines available~ – Lily Apr 28 '10 at 22:42
1

@Lily - That isn't the case...try the example, you use `+=` instead of just `=` and it appends. – Nick Craver Apr 28 '10 at 22:51
you are right! I missed the += when I first looked at your solution. Sorry for my carelessness! ;-) – Lily Apr 29 '10 at 03:31

score 1 · Answer 2 · answered Apr 28 '10 at 22:39

1

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

answered Apr 28 '10 at 22:39

James Westgate

11,306
8
61
68

1

He mentioned he is a total noob in javascript. Better for him to learn it using just nilla javascript and then learn how to do it in jQuery. – Bob Apr 28 '10 at 22:47
1

I disagree. Why go through all that pain if you dont have to. Its like saying learn assembler before learning c. – James Westgate Apr 28 '10 at 22:48
I disagree. It's like saying learn assembler before learning Java. – Daniel Apr 29 '10 at 00:16
Oh, come on guys - plain Javascript is *nothing* like Assembler - and rudimentary understanding of javascript is an essential basis for proper jQuery usage. – Már Örlygsson Apr 29 '10 at 00:24
My point still stands. Why struggle with the different browser incompatibilities when you dont have to? Why do you think it has taken javascript 15 years to take off as a popular solution? – James Westgate Apr 29 '10 at 07:34
@James, I think I will start implementing using a JQuery version after pure JS version anyway~ :-) – Lily Apr 29 '10 at 15:32
@James, maybe because javascript was rife with vulnerabilities and used only for popups in the beginning? It certainly has matured as a language in recent years. It's only become popular because libraries like jQuery make it possible for any noob to claim they "know" javascript. As Már said, javascript is nowhere near as complicated as assembler. I would say a better comparison is that jQuery is like the crutch old guys use to walk, but you don't see babies using crutches to learn to walk, do you? @Lily, sorry about that! – Bob Apr 29 '10 at 20:42
jQuery isnt a crutch. Its an abstraction, it saves time. It makes your implementation future proof. It delivers more stable code, more quickly. Frameworks like jQuery helps brings programmers into client side RIA development, without it people wouldn't bother. In time they pick up the nuances of the JavaScript language. – James Westgate Apr 30 '10 at 08:45

SLaks · Accepted Answer · 2010-04-29T00:01:13.417

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

edited Apr 29 '10 at 00:01

answered Apr 28 '10 at 22:40

SLaks

868,454
176
1,908
1,964

1

Extra `()` in the interval call there :) – Nick Craver Apr 28 '10 at 22:55
Also worth pointing out that `new Array('a','b','c')` is sort of the n00b way of defining arrays -- `var msg_list = ['a','b','c'];` is much neater. :-) – Már Örlygsson Apr 29 '10 at 00:15
@Mar, you can tell I am 100% newbie from the very first sight~ haha~ ;-) Thanks for the tip! – Lily Apr 29 '10 at 03:32

score 1 · Answer 4 · answered Apr 28 '10 at 23:09

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.

score 0 · Answer 5 · edited May 23 '17 at 12:19

0

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

edited May 23 '17 at 12:19

Community

1
1

answered Apr 28 '10 at 22:35

dreeves

26,430
45
154
229

Append to a webpage in javascript

5 Answers5